每一个元素都有默认的display属性值，对于一些开始学CSS的朋友们，很容易混淆display:block;inline:inline-block这三种用法，下面将具体细说每一种的具体用法和实例相结合。
一、display:block（块级元素）
1.一个block元素总是会占据一行，当有多个block元素就要新起多行对应。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id='div1'>11</div>
<div id='div2'>22</div>
</body>
</html>
CSS:
#div1{
border:1px solid red;
}
#div2{
border:1px solid red;
}
效果图：
1.png
2、block元素可以设置width，默认情况下，block元素的宽度自动填满其父类元素宽度；即使设置了宽度，block仍然是独占一行。
#div1{
border:1px solid red;
width:100px;
}
#div2{
border:1px solid red;
width:100px;
}
效果图：
2.png
3、block元素可以设置height，默认情况下，block元素的高度会自动拓展包含子元素的内容。
#div1{
border:1px solid red;
width:100px;
height:100px;
}
#div2{
border:1px solid red;
width:100px;
height:100px;
}
效果图：
3.png
4、block元素可以设置padding和margin属性
#div1{
border:1px solid red;
width:50px;
height:50px;
padding:20px;
margin:20px
}
#div2{
border:1px solid red;
width:50px;
height:50px;
}
效果图：只对div1增加了padding和margin属性，参考div2进行对比。
4.png
5、block元素不能实现vertical-align这个属性。
总结：
<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素常见的例子，我们可以设置宽度和高度，同时可以控制元素的padding和margin属性。
二、display:inline（行内元素）
1、inline元素不会独占一行，多个相邻的行内元素会排列在一行内，直到排不下再新换一行。
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<span id="span1">11</span>
<span id="span2">22</span>
</body>
</html>
CSS：
#span1{
border:1px solid red;
}
#span2{
border:1px solid red;
}
效果图：
5.png
2、inline元素设置width和height属性无效，宽度由元素内容决定。非替换行内元素(p、label等)的行框高由line-height决定，替换行内元素(img、input、textarea等)的行框高由height、margin、padding、border决定。
#span1{
border:1px solid red;
width:100px;
height:100px;
}
#span2{
border:1px solid red;
}
效果图：只新增span1中宽度和高度，span2作为对比参考
5.png
3、margin和padding 在竖直方向上无效，在水平方向上有效。
#span1{
border:1px solid red;
padding:20px;
margin:20px;
}
#span2{
border:1px solid red;
}
效果图：只新增span1中padding和margin，span2作为对比参考
6.png
4、inline元素受vertical-align属性和white-space属性控制
总结：
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素常见的例子，设置宽度和高度对inline元素没有影响，设置padding和margin在竖直方向上无效，在水平方向上有效。
三、display:inline-block
既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。但是不是所有浏览器都支持这个属性，例如IE6和7就不支持这个属性，要实现这个属性必须利用其它办法。
HTML ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="div1">11</div>
<span id="span1">22</span>
</body>
</html>
CSS：
#div1{
border:1px solid red;
width:50px;
height:50px;
padding:20px;
margin:20px;
display:inline-block;
}
#span1{
border:1px solid red;
width:50px;
height:50px;
padding:20px;
margin:20px;
display:inline-block;
}
效果图：div1实现了不分行，span1实现了设置宽度和高度
7.png
网友评论