为什么第一个 div 内容在顶部添加额外的填充/边距?

Question

<div style="background-color: #f6f6f6; white-space: nowrap; padding-bottom: 3px; height: 270px;">
<div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px;">
asdf<br />asdsd
</div><div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px">
asdf<br />dsasdf<br />asdsd
</div>
<div style="display: inline-block; background-color: white; width: 286px; height: 267px">
asdf<br />dsasdf<br />asdsd
</div>
</div>

小提琴： https://jsfiddle.net/mdogancay/gbk350av/

为什么会这样？

Answer 1

只需向父/外部div 添加一个display:flex，这应该可以解决填充问题。

#outer {
background-color: #f6f6f6;
white-space: nowrap;
padding-bottom: 3px;
height: 270px;
display:flex;

}
#div1 {
display: inline-block;
background-color: white;
margin-right: 3px;
width: 286px;
height: 267px;

}
#div2 {
display: inline-block;
background-color: white;
margin-right: 3px;
width: 286px;
height: 267px;
}
#div3 {
display: inline-block;
background-color: white;
width: 286px;
height: 267px;
}

<div id="outer">
<div id="div1">
div1-line1<br />div1-line2
</div>
<div id="div2">
div2-line1<br />div2-line2<br />div2-line3
</div>
<div id="div3">
div3-line1<br />div3-line2<br />div3-line3
</div>
</div>

Answer 2

这是因为您使用display：inline-block为每个div添加高度。尝试删除它并添加浮点数：为每个div保留。它会工作 截屏

Answer 3

因为你在每 3div中使用inline-blockpreperty .与前div不同的是，其他divs有 3 行，inline-block属性尝试根据其他divs的行调整第一行div。若要解决此问题，请在第一行的开头使用<br />div's

如下

<div style="background-color: #f6f6f6; white-space: nowrap; padding-bottom: 3px; height: 270px;">
<div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px;">
<br />asdf<br />asdsd
</div>
<div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px">
asdf<br />dsasdf<br />asdsd
</div>
<div style="display: inline-block; background-color: white; width: 286px; height: 267px">
asdf<br />dsasdf<br />asdsd
</div>
</div>

或 将display: flex属性添加到父div(不添加额外的<br />)

<div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px;">
asdf<br />asdsd
</div>
<div style="display: inline-block; background-color: white; margin-right: 3px; width: 286px; height: 267px">
asdf<br />dsasdf<br />asdsd
</div>
<div style="display: inline-block; background-color: white; width: 286px; height: 267px">
asdf<br />dsasdf<br />asdsd
</div>
</div>

Answer 4

这与HTML元素的默认"垂直对齐"属性有关。 您可以在此处阅读有关它的更多信息： https://css-tricks.com/fighting-the-space-between-inline-block-elements/并在此处查看一些工作示例：https://dabblet.com/gist/2422174

基本上，如果您将"垂直对齐：顶部"添加到 rougediv 元素中，它应该可以:)