Html 子元素上的填充不'；不移动父级大小

我试图理解为什么在下面的代码中，在填充设置为15px的情况下，子项不移动父项

正文{
背景色：黑色；
}
.盒子{
背景色：白色；
显示：内联块；
}
.box\u列表{
保证金：0；
列表样式：无；
填充：0；
文本对齐：居中；
字号：0；
}
.box\u项目{
颜色：黑色；
显示：内联；
字体大小：14px；
垂直对齐：中间对齐；
填充：15px；
}

A
A
A


A
A
A

这是因为

.box\u项

类的

显示：inline

。如果您将

display

更改为

inline block

，您的问题将得到解决

“内联”不会垂直推送元素：

内联元素将接受边距和填充，但该元素仍然如您所期望的那样位于内联位置。边距和填充只会将其他元素水平推离，而不是垂直推离

内联块执行以下操作：

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

---

您可以阅读有关如何正确使用

显示

属性的内容。

这是因为

.box\u项

类的

显示：内联

。如果您将

display

更改为

inline block

，您的问题将得到解决

“内联”不会垂直推送元素：

内联元素将接受边距和填充，但该元素仍然如您所期望的那样位于内联位置。边距和填充只会将其他元素水平推离，而不是垂直推离

内联块执行以下操作：

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

---

您可以阅读有关如何正确使用

display

属性的内容。

这是因为您将

列表项设置为
display:inline它们需要
显示：内联块如果希望顶部/底部填充产生影响


正文{
背景色：黑色；
}
.盒子{
背景色：白色；
显示：内联块；
}
.box\u列表{
保证金：0；
列表样式：无；
填充：0；
文本对齐：居中；
字号：0；
}
.box\u项目{
颜色：黑色；
显示：内联块；
字体大小：14px；
垂直对齐：中间对齐；
填充：15px；
}


A
A
A


A
A
A

这是因为您将
列表项设置为
显示：内联它们需要
显示：内联块如果希望顶部/底部填充产生影响


正文{
背景色：黑色；
}
.盒子{
背景色：白色；
显示：内联块；
}
.box\u列表{
保证金：0；
列表样式：无；
填充：0；
文本对齐：居中；
字号：0；
}
.box\u项目{
颜色：黑色；
显示：内联块；
字体大小：14px；
垂直对齐：中间对齐；
填充：15px；
}


A
A
A


A
A
A