Box model CSS tutorial

CSS box model explained

CSS box model explained

In a document using CSS it is very important to know the CSS box model. The CSS box model helps you understand how a HTML element is presented in a box. It will very difficult to handle physical relation of an HTML element to other elements without knowing the HTML box model or CSS box model. By understanding the box model CSS it is easy to handle things like page layouts etc. Learn more about Cascading Style Sheets tutorials here on HowToCode.PK

CSS box model example

The CSS box model is not just a single thing when it comes to CSS. It includes all the physical properties of an element. All the properties of the rectangular box including margins, borders, padding, and width of the content and height as well are considered as a box. See the CSS box model picture below to understand more.

CSS box model explained

In the above picture you can see that it is not only the width of the element which is important about the content relation to other elements. You can see that there are padding, borders and width that are in the box model. Now let us discuss the properties that make up the box model in a bit more detail.

Box Model CSS Margin

In the picture above you can see the margins for the box. The margins are the properties which represents the space around an element. The margins are used to define spaces in the page elements. They are not included in the final width of an element but they determine how the elements are going to relate the other elements in a HTML document. They determine how much space an element requires in a layout.

Box Model CSS Border

The border is allowed for almost all the HTML elements. The borders are set by default for some elements but for most of elements it is not. The border takes three properties to be set. It requires border width, border style and border color. You can set a single border for all the sides of an element or you can define it separately for all the side individually as we have done in the above picture. You have to define border-top, border-right, border-bottom and border-left if you want to style all the side individually. The borders are included in the box model. The width of border is added in the overall width of the box model. This is very important to keep in mind that the borders are also included in the width of an element otherwise it can cause serious problems.

Box Model CSS Element

The next property of the box model that we are going to discuss is the padding of an element. It is the space between the border and the contents of an element. The padding can be easily mixed with margins so be careful when using them. Padding is specified by a single statement for all the sides or individually for all the sides separately.

CSS Box Model Width

The width of an element can be set in percentages or in a fixed value. You should keep in mind that the width of an element and the total width of an element are two different things. It is very important to keep in mind that the total width of a box model is calculated as:

Total width = {left border + left padding + content width + right padding + right border}

The line above is very important to keep in mind as a developer. It really breaks a lot of layouts as the developers are not so familiar with this concept.

When you are designing a site keep in mind that if a property is not set or declared, it may not be zero. The browsers apply their default margins to elements, so you have to be careful. When you are going to define a width of an element as 100% you have to be careful about the padding and margins for the element. It may become more than 100% if the margins and padding are applied.