padding + line-height 如何覆盖高度?

How does padding + line-height overwrite height?

在这个例子中

https://codepen.io/team/css-tricks/pen/1ea1ef35d942d0041b0467b4d39888d3

当我在.flex-item css中玩padding时,我发现它可以覆盖height限制,即padding + line-height > height,我在哪里可以找到这样的优先级?

元素的总高度包括填充。 您可以添加

box-sizing: border-box;

对于.flex-item

border-box 告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。如果将元素的宽度设置为 100 像素,这 100 像素将包括您添加的任何边框或填充,并且内容框将缩小以吸收额外的宽度。这通常使得调整元素的大小变得更加容易。 参见 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。了解更多详情。

这是正常行为。

您的弹性项目行高很大。如果您向其中添加填充,那么您的内容会扩展容器的大小(您的 div)。你必须在你想要的高度和你添加的 line-height/padding 之间保持一致。