时间戳

首页 > 解决方案 > How does padding + line-height overwrite height?

css - How does padding + line-height overwrite height?

问题描述

in this example 

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

When I played with padding in .flex-item css, I found it can overwrite height limit that is padding + line-height > height, where can I find such precedence?

标签： cssheight

解决方案

The total height of the element includes padding. You can add 

box-sizing: border-box;

for .flex-item

border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. See https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing. for more details.

推荐阅读