Left Arrow.Back
Left Arrow.Back

Notes / CSS / box-sizing

box-sizing

Wireframe of nested rectangles labeled margin, border, padding & content.

CSS box-sizing

Planted

Status: seed

All elements in the DOM are rectangles. The CSS property box-sizing determines how the total width & height of these rectangles is calculated. It can be set to:

  • content-box or
  • border-box

content-box

The default. When this value is set & you set the width of an element, you are setting the width of the content box. The box that contains text, image, video, ... The total horizontal space the element will take up is:

  • width +
  • padding +
  • border +
  • margin
Wireframe of nested rectangles labeled margin, border, padding & content.

localhost:3000

import './styles.css'
import './styles.css'

border-box

The more common value used. When this value is set & you set the width of an element, you are setting the width of the border box. The box that contains the border, padding & content box. The total horizontal space the element will take up is:

  • width +
  • margin
Wireframe of nested rectangles labeled margin, border, padding & content.

localhost:3000

import './styles.css'
import './styles.css'

If using this value, it is common to include the below snippet in your CSS reset to set it on all elements:

index.js

Working with Margins

When working with margins, their size can be influence by things other than the CSS margin value. See consistent / varying spacing.

Source