A Guide to Understanding the CSS Box Model

Photo by rawpixel on Unsplash

In any subject of knowledge, understanding the basics is very important. If you are confident with the basics, you can successfully maneuver your way through any complexity that relates to that subject. This principle applies greatly to CSS and we are going to discuss one of the fundamental topics that aids your understanding on CSS layouts better. Welcome the CSS Box Model

So, What’s the CSS Box Model?

Without understanding the Box Model, almost every task related to the physical relationships of elements as regards web development would be somewhat difficult, especially for beginners.

However, if you are able to give your time to having a thorough grasp of the Box Model, tasks like page layout become much easier to work with.

So, Let’s go ahead and understand what the box model means:

In simple, plain language, the Box Model is just a term used to describe rules that surround the physical properties of all HTML elements.

A good way to think about this is that every single element on your webpage is considered to be in a rectangular box and the physical properties of the box which are its width, height, padding, margin define not only the size of that element, but also how it relates to all other elements around it.

I hope you understood this definition. Have a look at the pictorial description below.

Quick description of the box model

This diagram consists of the properties of box elements we will talk about in this article. In the diagram above, we have an element. This could be a heading, paragraph, image. It really doesn't matter, almost the same principle works for all, So, we are going to work through from the outermost to the innermost properties.

Margin, Border and Padding

The first item we will encounter from the outside is called the elements Margin. Margins can be seen as the space around every element, hence they are used to calculate the space between page elements. One thing you should know is that margins cannot be used independently to calculate the full width of an element but then they are very important as regards to how an element relates to another element and also how much space an element will consume in a page layout. The way we give values to a margin is by giving it top, bottom, left and right values. Lets me show you some code:

/* value here can be in px, ems etc */
margin-top: value;
margin-right: value;
margin-bottom: value;
margin-left: value;

This can also be done using some shortcut rules introduced from CSS3.

If the margin property has four values:

 margin: 7px 12px 25px 20px;

• top margin is 7px
• right margin is 12px
• bottom margin is 25px
• left margin is 20px

If the margin property has three values:

margin: 20px 70px 55px;

• top margin is 20px
• right and left margins are 70px
• bottom margin is 55px

If the margin property has two values:

margin: 70px 55px;

• top and bottom margins are 70px
• right and left margins are 55px

If the margin property has one value:

margin: 55px;

• all four margins are 55px

You can read more about margins on w3schools.

The next property we are going to discuss is the page elements Border. Every element has a border assigned to it, but by default, most elements do not show it. The border is that line around the element immediately after the margin.

All borders have three properties;

border-width: value; /* value here can be in px, ems etc */
border-style: value; /* value here can be dotted, solid etc */
border-color: value; /* value here can be a color in hex, rgb etc */

Borders can also be assigned to one of the top, bottom, left and right of an element. Borders are very important in explaining the box model because they define the outside edge of an element and they are used in calculating the complete size of an element. You should read more about Borders here

The next thing we will be considering is Padding. Padding is defined simply as the space added to an element within the border. The amount of padding is used to calculate the overall width and height of an element, same as borders. Padding can also have top, right, bottom, left values and same shortcuts with similar rules to the one of margin. You should read more about padding and practice it here.

Element Content-area

The content-area is the part of the box model where the element fits. Its size and dimensions are controlled by the width and height properties in CSS. Lets talk about the width and height properties. It is sort of self explanatory. It just means the width and the height of the element’s content area. We should note something very important here, there is a difference between the width and height properties and the total width and height of an element. The total width of an element is the sum of its left and right border values, the left and right padding values, and whatever the elements width property is. This is a concept that confuses new developers a lot.

We can also get around this by using another property of CSS known as the box sizing property.

box-sizing: value;
/* It accepts two values, content-box or border-box. */

The content box value calculates the width and height as it is while the border box value includes the border and padding values into the width and height values allowing you to set the total width and height of an element through the width property alone.

Conclusion

These are the properties attributed to the Box model. However, there are a few things one should know about the box model which are somehow important to how it works. You should know that because you didn't declare a property doesn't mean the property doesn't have a value. You should know that all browsers come with some default styles that apply to some HTML elements and once you do not change or override them, they remain and apply to your page. This helps a lot in debugging. You can checkout a list of some default styles with browsers here.

Another quick tip is you can set the width of an element to 100% and make it fit fully within its parent element. If you don’t know what I mean by parent element, you should read this article.

I hope you learnt a thing or two from this article about the box model and I hope you have built more confidence as regards using its properties.

If you have, please drop some claps… Its a huge motivation to do more!