为什么CSS flex似乎应用了两次内部元素的填充

发布于10月08日

我发现了CSSdisplay: flex的一个奇怪之处，它似乎将内部元素的填充应用了两次.

我从我的项目中提取了这段代码.每个段落都应该有21px高，而它们的内部跨度有一些填充，使它们的总高度达到20.94px，正好适合里面.如果没有填充，跨度的高度将是17px，所以这个填充增加了3.94px.

然而，最后一段被设置为display: flex.最终跨度的高度为24.94px，=21px+3.94px.所以它不会精确地应用两次填充，因为这将是20.94+3.94.相反，它将填充应用于父段落的高度？这真的没有任何意义！或者，也许line-height是从一个不同的值计算出来的？

你知道这里到底发生了什么吗，我能做些什么来让最后一段回到合适的高度？

如果这是一个浏览器的怪癖，而不是一个css怪癖，我在Chrome116上进行了测试.

p {
  font-family: Georgia;
  font-size: 15px;
  line-height: 1.4;
  margin: 0;
}

p span {
  padding: 0.132em 0;
}

p:last-child {
  display: flex;
}

<div>
  <p><span>Paragraph 1</span></p>
  <p><span>Paragraph 2</span></p>
  <p><span>Paragraph 3</span></p>
</div>

问题

是内联元素，这意味着默认情况下会为其分配display: inline.填充只适用于内联元素的第padding-left和padding-right，因此在OP^✤css中:

p span { padding: 0.132em 0; }

实际上是:

p span { padding: 0; }

此外，如果有任何弹性项目(例如p:last-child span)是display: inline，则它将表现为display: inline-block.内联块元素的行为类似于内联元素，但padding-top和padding-bottom适用于它，因此最后一个比其他两个高.

解

由于每个都应该有padding-top和padding-bottom，所以只需将display: inline-block赋给每个:

p span { display: inline-block; /* Add this */ padding: 0.132em 0; }

在下面的示例中，每个用蓝色勾勒，每个用红色勾勒.请注意，前三个应用了OP CSS，并且前两个的高度比第三个短.然后，在最后三个中，将display: inline-block应用于每个，并且每个的高度相等.

^{^✤O基本Post指的是您或您发布的问题.}

:root {
  font: 15px/1.4 Georgia;
}

div+div {
  margin-top: 25px;
}

p {
  margin: 0;
  outline: 1px dashed blue;
}

p span {
  padding: 0.132em 0;
  outline: 2px dashed red;
}

p:last-child {
  display: flex;
}

.solution span {
  display: inline-block;
}

<div class="original">
  <p><span>Paragraph 1</span></p>
  <p><span>Paragraph 2</span></p>
  <p><span>Paragraph 3</span></p>
</div>

<div class="solution">
  <p><span>Paragraph 4</span></p>
  <p><span>Paragraph 5</span></p>
  <p><span>Paragraph 6</span></p>
</div>

为什么CSS flex似乎应用了两次内部元素的填充

推荐答案

Inline Flex Items

问题

解

Css相关问答推荐

如何提高数学输出的质量？

悬停时可展开的按钮与屏幕右侧对齐，如何保持未悬停的按钮正确对齐？

在GRID-TEMPLATE-ROWS中设置最大行数：Repeat()

靴子，为什么我不能让任何东西正确地排好队？

在Reaction中自定义ANTD日期选取器

使用带有 fr 单位的 calc 函数

当您到达页面底部时，如何使页脚 div 将附加的 div 向上推

如何让我的注册按钮在我的网站上像球一样 skip ？

如何禁用 Angular Material Pagination 按钮的波纹效果？

通过css修改样式shadowroot元素

为什么 flexbox 中的在应用居中时不会调整大小？

整个列的 CSS Grid Margin Top

：required 或 [required] CSS Select 器

如何使用 TailwindCSS 禁用环形阴影？

具有自动调整大小的自动填充行的 CSS 网格

在 CSS 中相对于另一个元素定位一个元素

你能用 JavaScript 控制 GIF 动画吗？

使用 CSS 在悬停时转换 SVG 路径的填充属性

固定元素在 Chrome 中消失

表格溢出时水平滚动