[CSS3] CSS Display Property: Block, Inline-Block, and Inline
Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest.
Takeway:
- Inline: Can NOT add height and width. But can add margin and padding
- Inline-block: Can add height, width, margin and padding. Not take the whole row.
- Block: Can add height, width, margin and padding, take the whole row.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>Here is some text in a paragraph tag, a paragraph tag has a dispay property of block by defualt. <span class="inline">A span is inline by defualt</span> but with some styling we can make it <span class="inline-block">inline-block</span>. Inline block will respect top and bottom margins and padding. We can also make it <span class="block">block</span> by adding classes and styling them.</p> </body>
</html>
.box {
border: 1px solid black;
margin: 5px;
display: block;
}
p {
border: 1px solid black;
}
.inline {
border: 1px solid blue;
display: inline;
margin-left: 10px;
margin-right: 50px;
padding-left: 10px;
padding-right: 50px;
margin-top: 50px;
width: 500px; // Doesn't work
height: 200px; // Doesn't work
}
.inline-block {
border: 1px solid red;
display: inline-block;
margin-right: 20px;
width: 200px;
height: 50px;
}
.block {
display: block;
border: 1px solid green;
width: 50px;
height: 100px;
}
[CSS3] CSS Display Property: Block, Inline-Block, and Inline的更多相关文章
- CSS display:inline和float:left两者区别探讨
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有 ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- CSS——display(Block none inline等)属性的用法
在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...
- css display block 和 inline
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- display的block、none、inline属性及解释
常会用到display对应值有block.none.inline这三个值 参数: block :块对象的默认值.用该值为对象之后添加新行.之前也添加一行. none :隐藏对象.与visibility ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- CSS display:inline-block
CSS display:inline-block 在css布局里,我们经常看到代码 「display:inline-block; *display:inline; zoom:1; 」,大多人会说上面的 ...
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS Display(显示) 与 Visibility(可见性)
display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. Box 1 Box 2 Box 3 隐藏元素 - display:none或visibility:hid ...
随机推荐
- 数据库备份和恢复秩序的关系(周围环境:Microsoft SQL Server 2008 R2)
让我们来看看在备份序列新手 --1.塔建环境(生成测试数据和备份文件) /* 測试环境: Microsoft SQL Server 2008 R2 (RTM) - 10.50.1600.1 (X64) ...
- asp.net实现将网页存为mht格式文件,类似于网页另存为mht功能
MHT 首先说一下什么是mht格式文件,MHT叫“web单一文件”,就是把网页中包含的图片,CSS文件以及HTML文件全部放到一个MHT文件里面,而且浏览器可以直接读取显示.可以通过ie浏览器将一个网 ...
- js过滤
datagrid: loadFilter: function (data) { return loadFilter(data); ...
- FineUI模拟树下拉列表
模拟树的下拉列表 很多时候,我们希望在下拉列表中显示简单树状的层次结构,在菜单设置.机构设置等场景下这个需求尤为突出.也是基于项目需求的考虑,FineUI增加了模拟树的下拉列表的功能,显示效果如下所示 ...
- win8 安装myeclipse 失败 MyEclipse ForSpring 安装失败
好像是main方法.jar无法载入之类的.. 可能是权限的问题哦.. 使用管理员权限试一下..
- ios swift(1)冒泡排序
//冒泡排序 稳定性最高 时间复杂度高 O(n(2)) ,交换次数太多, 一次交换等于三次赋值 最简单 var count = 0 func sortInts(inout data : [I ...
- 1、shell 简介
Shell 本身是一个用C语言编写的程序,它是用户使用Unix/Linux的桥 梁,用户的大部分工作都是通过Shell完成的.Shell既是一种命令语言,又是一种程序设计语言.作为命令语言,它交互式地 ...
- CODEVS 3138 栈练习2
3138 栈练习2 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description (此题与栈练习1相比改了2处:1加强了数据 2不保证栈空时 ...
- Java中的日期操作
在日志中常用的记录当前时间及程序运行时长的方法: public void inject(Path urlDir) throws Exception { SimpleDateFormat sdf = n ...
- PHP 中数组函数 isset 效率比 array_key_exists 更高
PHP 中数组函数 isset 效率比 array_key_exists 更高 PHP 浏览:4194 2014年04月05日 isset 和 array_key_exists 函数都可以用来测试数组 ...