Home Advertise with us Forum Articles Sitemap Contact
Logo  

CSS Box Model

The "Box Model"forms an important part of CSS since it specifies exactly how the various elements are laid out. All the HTML elements can be considered to be as boxes. The box model is concerned largely with the layout & design.

The CSS box model can be explained as a box that goes around or wraps the HTML elements & essentially consists of the margins, borders, padding & content.
Margin - The margin defines the relationship between different elements & is completely transparent without any background color.

Border - This lies within the margin around the padding & content. This is affected by the box’s background color.

Padding - Lying within the border this goes wraps around the content & is affected by the background color of box.

Content - This is the innermost part of the box containing the text & images.

An important thing to remember while setting the width & height properties of any element using CSS is that, in order to know the full size of that element, it is essential to also add margin, border & padding.

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

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



Example:

width:250px; padding:5px; /* +10px (left & right padding) */

border:10px solid black; /* +20px (left & right border) */

margin:10px; /* +20px (left & right margin)