Box Model (Box Model) in CSS

Elements in HTML can be considered boxes. In CSS, the term 'box model' is used to refer to design and layout.

Basically the CSS box model is a box that surrounds HTML elements, including margins, borders, padding, and internal content. The image below shows the location and relationship between these components.

Box Model (Box Model) in CSS Picture 1
Components in a CSS box model

Explain components:

  1. Content - content in the box, where text and images are displayed
  2. Padding - white space around content, transparent
  3. Border - border around content and padding
  4. Margin - the margin outside the border, transparent

The box model allows adding borders around the element and defining spaces between them.

 div { 
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

Element width and height

To determine the height and width of the correct element on all browsers, you need to know how the box model works. When setting the height and width properties of elements with CSS, you only set up for the content only. To accurately calculate the element size, both the border, margin and padding sections need to be added.

Assume element

has a total width of 350px.

 div { 
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

The actual calculation will be like this:

320px (width)
+ 20px (padding left and right)
+ 10px (left and right borders)
+ 0px (left and right margins)
= 350px

Thus, the total width of the actual element is calculated by the formula:

The total width of the element = padding left + padding right + left border + right edge + left margin + right margin

The total height of the actual element is calculated by the formula:

Total height of the element = padding on + padding below + upper border + lower border + upper margin + lower margin

Previous lesson: Height and width in CSS

The following article: Outline in CSS

5 ★ | 1 Vote

May be interested

  • Outline in CSSPhoto of Outline in CSS
    outline is a line around the element, located outside the border to highlight the element.
  • Text - Text in CSSPhoto of Text - Text in CSS
    the article explains how to format text in css.
  • Tooltip creation tools are useful with CSSPhoto of Tooltip creation tools are useful with CSS
    there are some really interesting tooltip designs and designs that you can create with css using the tooltip script. let's find out through the following article!
  • Font in CSSPhoto of Font in CSS
    in css, font properties determine family font, density, size and style for text.
  • Icon in CSSPhoto of Icon in CSS
    this article introduces a few ways to add icons to html pages.
  • Path in CSSPhoto of Path in CSS
    with css, the path can be styled very differently.