CSS

The CSS box model explained

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

How does the CSS Box Model Work?

Everything in a web page is a rectangle.

Whenever you open a website and see all its colors and shapes it becomes easy to forget that every single web page is built of only one thing rectangles.

This is one of the most crucial things to keep in mind when you are converting the mockup of your website in the actual Web page. At the end of the day, you need to place all your elements inside rectangles(also called boxes) to achieve your desired result through the composition of these boxes.

 

 

Block vs Line elements

When you use the box model in your page the elements might come in one of these two flavors:

  1. Block elements.
  2. Line elements.

The most notable difference between Block and Line elements is that, while block elements will use 100% of the parent width by default and cause line breaks stacking over each other, inline elements use only the required width to wrap the content and will not cause breaks.

This image summarizes this behavior pretty well

List of block elements:
<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.

List of line elements:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

Given the above-listed differences, both elements behave similarly when it comes to box model properties.

The box structure

The fundamental properties of every CSS box are Width, Height, Padding, Border, and Margin and they control the box dimensions, the inner spacing between items, the outer space, and the borders. I will explain each one of them in more details:

 

Margin

The margin defines the spacing between the elements and can be defined independently using the CSS properties:
margin-top,margin-left,margin-right and margin-bottom.

In case of inline elements, the margin top and bottom definitions don’t produce effects.

.box {
    -moz-box-sizing: border-box;
         box-sizing: border-box;

    width: 200px;
    height: 200px;
    margin: 35px;
    padding: 20px;
    border-width: 10px;

}

The outer brown layer represents the margin in this example.

 

Padding

The padding property defines the spacing between the box content and its border so for example if you define a background color for your element you will still have it inside the defined padding(in opposition to what happens with the margins). So if you want to make your box use more space without changing its content size this is the property that you are looking for.

.box {
    -moz-box-sizing: border-box;
         box-sizing: border-box;

    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 45px 45px 45px 50px;
    border-width: 10px;

    /* border-style and border-color must
       be set for border-width to apply */
}

The green layer represents the padding in this example.

Border

The border is placed between the padding and the margin and can be seen as a delimiter between the element and everything outside it. this property takes a size, style, and color.

.box {
    -moz-box-sizing: border-box;
         box-sizing: border-box;

    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 20px;
    border-width: 30px;

    /* border-style and border-color must
       be set for border-width to apply */
}

 

The beige layer represents the border in this example.

Box-Sizing:

by default the properties Width and Height will define the size of the box available to the content,┬ásometimes this can be confusing. Let’s imagine that you what to make a 4 columns layout your first instinct might be to define the width of your container to 25% (100% of the width split by the 4 rows) the problem is that as soon as you add padding or borders to your container the layout will break, because by default the box-sizing will be in the box-content mode, that defines the size of the content.
To work as expected you need to define the box-sizing to be border-box, in this mode, the border size and the padding size are included in the width. So even if you have borders and padding your layout will not break because the 25% will include these properties

Remember:

Border-box:

Width = border + padding + content

Content-box:

Width = content.

Border and padding are excluded from the calculation.

The same thing is valid for the height.