填充+行高如何覆盖高度？

Question

在此示例中

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

当我在padding CSS中使用.flex-item时，我发现它可以覆盖height的{​​{1}}限制，在哪里可以找到这样的优先级？

Answer 1

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

box-sizing: border-box;

.flex-item

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

Answer 2

这是正常现象。

您的flex-item具有很大的行高。如果在其中添加填充，则内容将扩展容器的大小（div）。您必须在所需的高度与添加到其中的行高/填充之间保持连贯。