inline、inline-block、block 的 margin 和 padding 表现

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>