CSS:box-sizing
lastmod 2023-03-09created 2022-12-134 edits
The box-sizing CSS property sets how the width and height of an element are calculated.
By default in the CSS box model, the width and height you set apply only to the element's content box. If the element has a border or padding, they are added to the width and height when drawn on screen. So when setting sizes, you have to account for the border and padding to get the size you want.
Values
- content-box
- The initial default defined by the CSS standard. The width and height properties include only the content area, not padding, margin, or border. So an element with
.box {width: 350px; border: 10px solid black;}applied is 370px wide.- The element's size is calculated as width = content width, height = content height; border and padding are not part of the formula.
- border-box
- The width and height properties include padding and border, but not margin. Note that padding and border are placed inside the element's box. So an element with
.box {width: 350px; border: 10px solid black;}applied is 350px wide. Since the content area's size cannot be negative, you cannot use border-box to make an element disappear.- The element's size is calculated as width = border + padding + content width, height = border + padding + content height.
See also
Favorite site
- box-sizing - CSS: Cascading Style Sheets | MDN
- CSS / box-sizing / A property that decides what a box's size is calculated against – CODING FACTORY
- [Recommended] * { box-sizing: border-box } FTW - Paul Irish - A widely used, original box-sizing reset - See Tailwind:Base.