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

这是因为如果你想让顶部/底部填充产生影响，你需要将list items设置为display:inline; {/ 1}}。

＆＃13;

display:inline-block;

＆＃13;

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;
}

＆＃13;

Answer 2

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

内联不会垂直推送元素：

内联元素将接受边距和填充，但元素仍然可以像您期望的那样内联。边距和填充只会将其他元素水平移开，而不是垂直移动。

内联块确实：

设置为内联块的元素与内联非常相似，因为它将设置内联文本的自然流（在＆＃34;基线＆＃34;上）。不同之处在于您可以设置将被尊重的宽度和高度。

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

的信息

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

2 个答案: