The CSS Box Model

The CSS Box Model | CSS Layout | How to Work with the Box Model in CSS?

by

Everything in CSS is essentially a box, which orders from inside to outside. In this tutorial, we will be having a proper look at the CSS Box Model concept in order to build more complex layout tasks with a proper knowledge of how it world and the terminology that refers to it.

What is the CSS Box Model?

A CSS box model is a section that covers numerous properties, such as edge, border, padding, and material. It is utilized to improve the design and structure of a web page. Also, the box model in CSS can be applied as a set of tools to personalize the layout of various components. As per the CSS box model, the web browser provides each element as a square prism.

Parts of a Box

Every box is formed of four parts (or areas), determined by their respective edges. The four parts of a box we have are as follows:

  • Content area – The content of the box, where text and images resemble
  • Padding area – Clears a space around the content. The padding is transparent
  • Border area – A border that goes around the padding and content
  • Margin area – Clears an area outside the border. The margin is transparent

We can watch the box model in action by opening up the browser dev tools.

box model

Here we can see, chrome tells us about the properties of the div element.

The cyan color represents the actual content in the element, surrounding it the green color represents the padding for the content. Then the orange color represents the border and brown represents the margin respectively.

When we mention the height and width of an element, it changes the content area. Any of the padding, border, or margin is calculated outside of that area.

Also Check:

Elements of the width and height

The actual area that an element’s box may take on a web page is measured like this:

Size of the box CSS Properties
Height height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
Width width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

The Standard CSS box model

In case you provide a box width and height assets, then it determines the width and height of the content box in the standard CSS box model. Any padding and border are then added to that width and height to get the total size used by the box. This is displayed in the image below.

If we believe that the box has the resulting CSS defining width, height, margin,border, andpadding:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Output Box:

standard css box model example output

Example of margins, padding, and borders

The following example demonstrates how margins, padding, and borders communicate. Let’s take a look:

<!DOCTYPE>
<HTML>
  <HEAD>
    <TITLE>Examples of margins, padding, and borders</TITLE>
    <STYLE type="text/css">
      UL { 
        background: yellow; 
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* No borders set */
      }
      LI { 
        color: white;                /* text color is white */ 
        background: blue;            /* Content, padding will be blue */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Note 0px padding right */
        list-style: none             /* no glyphs before a list item */
                                     /* No borders set */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* sets border width on all sides */
        border-color: lime;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>First element of list
      <LI class="withborder">Second element of list is
           a bit longer to illustrate wrapping.
    </UL>
  </BODY>
</HTML>

Output:

css box model example result

The first of the following diagrams show what this example would return. The second represents the relationship between the margins, padding, and borders of the UL elements and those of its children LI elements.