html - 子元素上的填充不会移动父元素的大小

Question

我试图理解为什么在下面的代码中， child <li>不移动父项 <ul>内边距设置为 15px。

body {
  background-color: black;
}

.box {
  background-color: white;
  display: inline-block;
}

.box__list {
   margin: 0;
   list-style: none;
   padding: 0;
   text-align: center;
   font-size: 0;
}

.box__item {
  color: black;
  display: inline;
  font-size: 14px;
  vertical-align: middle;
  padding: 15px;
}

<div class="box">
  <ul class="box__list">
    <li class="box__item">A</li>
    <li class="box__item">A</li>
    <li class="box__item">A</li>
  </ul>
  <ul class="box__list">
    <li class="box__item">A</li>
    <li class="box__item">A</li>
    <li class="box__item">A</li>
  </ul>
</div>

http://codepen.io/anon/pen/ZKYbYx

唯一有效的填充是 left和 right , top和 bottom正在崩溃。

谢谢。

Answer 1

这是因为您将 list items 设置为 display:inline; 它们需要是 display:inline-block; 如果你想顶部/底部填充有影响。

body {
  background-color: black;
}

.box {
  background-color: white;
  display: inline-block;
}

.box__list {
   margin: 0;
   list-style: none;
   padding: 0;
   text-align: center;
   font-size: 0;
}

.box__item {
  color: black;
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
  padding: 15px;
}

<div class="box">
  <ul class="box__list">
    <li class="box__item">A</li>
    <li class="box__item">A</li>
    <li class="box__item">A</li>
  </ul>
  <ul class="box__list">
    <li class="box__item">A</li>
    <li class="box__item">A</li>
    <li class="box__item">A</li>
  </ul>
</div>