1、为了便于观察两者的区别,先设置一个起始样式。
<div class="wrap">
<div style="background-color: red;">1</div>
<div style="background-color: yellow;">2</div>
<div style="background-color: orange;">3</div>
<div style="background-color: blue;">4</div>
<div style="background-color: pink">5</div>
<div style="background-color: salmon;">6</div>
</div>
.wrap>div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
起始页面显示如下:
2、添加display: inline之后
.wrap>div{
width: 100px;
height: 100px;
display: inline;
line-height: 100px;
text-align: center;
}
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随 元素的内容 而变化。
可以看到 inline元素设置width, height属性 无效,没有产生效果,实际上使用此属性后,元素会被显示为内联元素,具有内联元素的属性。
inline元素的margin和padding属性:
水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;
竖直方向的padding-top, padding-bottom也可以产生效果,但是margin-top, margin-bottom不会产生边距效果。
附:
inline元素的上下间距是通过文字行高(line—height)设置的,实质上还是文字高度撑开元素容器产生的效果。
去掉line-height元素的效果如下:
3、添加display: inline-block之后
.wrap>div{
width: 100px;
height: 100px;
display: inline-block;
line-height: 100px;
text-align: center;
}
简单来说就是将对象呈现为 inline 对象,但是对象的内容作为 block 对象呈现,使用此属性后,元素会被现实为块级元素, inline-block 元素设置 width, height 属性 生效。之后的内联对象会被排列在同一行内,既具有 block 的宽度高度特性又具有 inline 的同行特性。
小总结:不管是使用inline-block还是inline,左右都会产生一个小间距,可能这就是为什么margin-left, margin-right可以改变,而margin-top, margin-bottom只能是默认值且不能改变吧。