The CSS Box Model

All HTML elements can be considered as boxes.

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, such as headings, links, tags, images etc.. 

A box consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.
In other words using the box model helps with the layout and styling of your web-page and website as a whole.

The image below illustrates the box model:

css-box-model

  • Margin - Clears an area around the border. You can set different margins for each side or top and bottom of an element. The margin does not have a background color, it is completely transparent. Imagine it as the space between one element of your web-page and another.
  • Border - A border that goes around the padding and content. The border is inherited from the color property of the box, so if your box has a background of white, then your border would also be white unless you state a different colour for your border in the style declaration. Example: ".box { border: 1px solid #CCCCCC ; }".
  • Padding - Clears an area around the content. The padding is affected by the background color of the box. If you have a border declared and no padding your content such as text would be aligned right next to the border and wouldn't look very good or readable, so padding helps in the visual aspect of your content.
  • Content - The content of the box, where your actual text and images will appear.

 

Take a look at this page for instance. You will see that all the elements such as the right column, text areas, the the menu system and comments section all have either borders, padding, and margins set to help with the design and display the content  to make it more presentable to the end user (You!).

 


 

Width and Height of an Element

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

 

The total width of the element in the example below is 344px:

width:300px;
padding:10px;
border:2px solid #313131;
margin:10px;

Let's look at the calculation:
300px (width)
+ 20px (left plus right padding)
+ 4px (left plus right border)
+ 20px (left plus right margin)
= 344px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

As we mentioned, HTML elements populate the page in what's known as the CSS box model. HTML elements are like a tiny boxes or containers that hold the pictures and text you specify.

People in this conversation

Leave your comments

Post comment as a guest

0 / 300 Character restriction
Your text should be in between 10-300 characters
terms and condition.
  • Guest - ddd

    Good post thanks for sharing

  • Guest - William Hanna

    Thanks for the valuable website. You have shared nice web hosting tips and css tutorials are also very awesome. I have also bookmarked the website.

    Comment last edited on about 2 years ago by Administrator
  • Guest - abc

    very nice post thank for sharing

Get The Latest Browsers

firefoxLogo

google

News Letter

Sign up for news letter