Skip to main content

What is the Box Model in CSS? What parts make up the Box Model?

CSSJunior~1 min read
Suggest an edit

The Box Model is a model by which the browser calculates the size and space around every block-level element. Any element in CSS is treated as a rectangular box made up of four areas (from the center outward):

  1. Content, the content (text, image, the element's content).
  2. Padding, the inner spacing between the content and the border.
  3. Border, the element's border.
  4. Margin, the outer spacing that creates space between the element and its neighbors.

Diagram

javascript
+-------------------------+ | margin | | +-------------------+ | | | border | | | | +-------------+ | | | | | padding | | | | | | +---------+ | | | | | | | content | | | | | | | +---------+ | | | | | +-------------+ | | | +-------------------+ | +-------------------------+

Content + padding + border + margin, determine the element's full visual size on the page.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit