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

Question

我试图理解为什么在下面的代码中，子 <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

这是因为 .box__item class 的 display: inline。如果您将 display 更改为 inline-block，您的问题将得到解决。

内联不垂直推动元素：

An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.

行内块做：

An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a width and height which will be respected.

您可以阅读如何正确使用 display 属性 here。

Answer 2

这是因为您将 list items 设置为 display:inline; 如果您希望 top/bottom 填充有影响，它们必须是 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>

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

Padding on child element doesn't move parent size

html

css

padding