inline、inline-block、block 的 margin 和 padding 表现
概述
display 属性 | 表现 |
---|---|
inline | margin 在垂直方向上不生效;设置 padding 本身生效,但是没有把父级元素撑开; |
inline-block | 盒宽度默认为内容宽度,设置 margin 和 padding 都生效 |
block | 盒宽度默认为父元素 100% 宽度,设置 margin 和 padding 都生效 |
测试结果图
测试代码
css
body {
margin: 0;
}
section {
width: 800px;
margin: 20px auto 0;
border: 1px solid #660099;
}
header {
line-height: 40px;
font-size: 22px;
text-align: center;
}
.box {
border: 1px solid yellow;
}
.com {
margin: 10px;
padding: 10px;
border: 1px solid #000;
}
.inline {
display: inline;
background: #FF3366;
}
.inline-block {
display: inline-block;
background: #FF9966;
}
.block {
display: block;
background: #99CC66;
}
.box {
background: #006699;
}
html
<section>
<header>inline</header>
<div class="box">
<span class="com inline">inline</span>
</div>
<div class="box">
<span class="com inline">inline</span>
</div>
</section>
<section>
<header>inline-block</header>
<div class="box">
<span class="com inline-block">inline-block</span>
</div>
<div class="box">
<span class="com inline-block">inline-block</span>
</div>
</section>
<section>
<header>block</header>
<div class="box">
<span class="com block">block</span>
</div>
<div class="box">
<span class="com block">block</span>
</div>
</section>