SOURCE

<div class="box2">
  aaaaaa
</div>

<div>
  bbbbb
  <span class="box1">cccccccccc</span>
</div>

<div class="box2">
  ddddddddddddd
</div>

<p>
  结论：行内元素，margin垂直失效，水平有效。
  <br />
  padding 水平有效，垂直自身有效，对其他元素没有影响。
</p>

<hr />

<p>
  你看，下面box3的padding 就会让box4下移。
  但是上面的span元素的padding 就不会。
</p>
<div class="box3">
  eeeeeeeee
</div>

<div class="box4">
  fffffffff
</div>

.box2{
  width:200px;
  height:30px;
  
  border:10px solid red;
}

.box1{
  border:10px solid green;
  margin:50px;
  padding:30px;
}

.box3{
  padding:10px;
  border:1px solid red;
}