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

【问题标题】：Padding on child element doesn't move parent size子元素上的填充不会移动父大小
【发布时间】：2023-03-10 02:20:01
【问题描述】：

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

谢谢。

【问题讨论】：

标签： html css padding

【解决方案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>

【讨论】：

【解决方案2】：

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

内联不会垂直推动元素：

内联元素将接受边距和内边距，但该元素仍像您所期望的那样处于内联状态。边距和内边距只会将其他元素水平推开，而不是垂直推开。

内联块的作用：

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

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

【讨论】：