1. Home
  2. Docs
  3. Web Technology I
  4. Style Sheet Language
  5. Box Model

Box Model

The box model is a fundamental concept in CSS that defines the layout and sizing of elements on a web page. It consists of content, padding, border, and margin, and it helps determine how elements are spaced and sized.

Here’s an overview of the components of the box model:

  • Content:
    • The innermost part of the box is the content, which holds the actual content of the element, such as text, images, or other media.
  • Padding:
    • Padding is the space between the content and the element’s border. It is specified using the padding property and can be set individually for each side using padding-top, padding-right, padding-bottom, and padding-left.
Screenshot 2024 03 05 182918
  • Border:
    • The border surrounds the padding, and it is specified using the border property. The border can have width, style, and color.
Screenshot 2024 03 05 182941
  • Margin:
    • Margin is the space outside the border. It defines the spacing between the element’s border and its surrounding elements. Like padding, margin can be set individually for each side.
Screenshot 2024 03 05 182954

The following figure illustrates the Box Model in CSS

Boxmodell detail 1

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *