Border-Box vs. Content-Box
In CSS, the box-sizing property defines how the total width and height of an element are calculated, including its content, padding, and border. There are two main values for the box-sizing property: content-box and border-box.
The main difference between border-box and content-box is how paddings and borders affect the total size of an element. With border-box, padding and border are included in the specified width and height, while with content-box, they are added to the specified width and height.
Example
Assigning a 200px width to an element results in different actual widths depending on the box-sizing used. With box-sizing: border-box, the entire element, including borders and padding, is confined to a true 200px width.
In contrast, with box-sizing: content-box, the borders and padding are added to the specified width, resulting in a larger overall size.
In the example below, a 20px border is added. The border-box element remains at 200px wide, including the border, while the content-box element now has a total width of 240px (200px content width plus 20px border on each side). This demonstrates how box-sizing affects the calculation of an element's total width.
Content-box:
- With box-sizing: content-box, the width and height of an element are calculated based solely on the content size.
- Padding and border are added to the specified width and height, increasing the overall size of the element.
- This is the default behaviour of elements in the CSS box model.
- In Figma: Border is outside of element
Border-box:
- With box-sizing: border-box, the width and height of an element include both its content size and any padding and border applied to it.
- Padding and border are included within the specified width and height, so they do not increase the overall size of the element.
- Border-boxes are currently used for all form elements, including buttons, including buttons, ensuring a consistent height of 48px for each element.
- In Figma: Border is inside of element
Usage in MDX
In MDX, we use border-box for elements that need to maintain specific dimensions. All form elements, including buttons, utilize border-box to ensure consistent width and height, with a minimum height of 48px for accessibility reasons.
For elements where precise dimensions are less critical, such as dialogs or modals, content-box is used. This approach allows these elements to expand as needed without strict dimension constraints.