The CSS Box model

Designing a layout of webpage using CSS is now a most popular and challenging among the web designer. The layout Design without a table have allowed us to add more features and control over the page.

While creating the box using CSS, it is necessary to understand the four terms MARGIN , BORDER , PADDING and ACTUAL CONTENTS.

Explanation of the different parts:

• Margin – This is an area around the border. [ outside the border]
• Border – A border that lies around the padding and content.
• Padding – This is an area around the content. [inside the border]
• Content – The content of the box, where text and images appear.

We have different types of tags to control these parts.

• Margin tag – This tag clears an area around the border. The margin does not have a background color, and it is completely transparent.
• Border tag – A border tag adds border around the padding and content. The border is affected by the background color of the box.
• Padding tag – This tag clears an area around the content. The padding is affected by the background color of the box.

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Width and Height of an Element

When we specify the width and height properties of an element with CSS, we are just setting the width and height of the actual content area. To know the full size of the element, we must also add the padding, border and margin tags.

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

<!–

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

–>

Let’s do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

Imagine that we only had 250px of space. Let’s make an element with a total width of 250px:

<!–

width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

–>

The total width of an element should always 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 always be calculated like this:

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