Back to Developer Roadmap

Box Model

src/data/question-groups/frontend/content/box-model.md

4.0520 B
Original Source

The CSS box model describes the rectangular boxes generated for elements in the DOM. The box model is composed of the following layers:

  1. Content: The innermost part, where text and images appear.
  2. Padding: The space between the content and the border.
  3. Border: The outer edge of the padding, surrounding the element.
  4. Margin: The space outside the border, separating the element from others.

By controlling each layer individually, you can define the look of each element in the user interface.