CSS box model

CSS box model (Box Model)

All HTML elements can be considered as box in CSS, "box model" is the term used to design and layout to use when.

It is a box, packaged around HTML elements CSS box model in nature, including: margins, borders, padding, and the actual content.

The box model allows us the space between the other element and placed around the element's border element.

The picture below illustrates the box model (Box Model):

Different parts of the description:

• Margin (Margin) - clear the area outside the border, margins are transparent.
• Border (Border) - around the inner margin and content of external borders.
• Padding (padding) - clear the area around the content, padding is transparent.
• Content (content) - the contents of the box to display text and images.

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

Width and height of the element

Important: When you specify a CSS element width and height attributes, you just set the width and height of the content area.You know, the full size of the element, you must also add the padding, border, and margins. .

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

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

Imagine you have only 250 pixels of space. Let us set the total width of the element 250 pixels:

The total width of the final element of the formula is this:

The total width of the element = left padding + width + right padding + border + left + right side of the box from the left + right margin

The total height of the element final calculation formula is this:

The total height of the element = height + top padding on the bottom border + padding + + + bottom border + margin on lower margins

Browser compatibility issues

Once the page is set to an appropriate DTD, most browsers will follow the above icon to render the content. However, IE rendering is incorrect. 5 and 6. According to the W3C specifications, the space occupied by the element content is set by the width property, and padding and border around the content is another calculation. Unfortunately, IE5.X 6 and use their own non-standard models in weird mode. The width of these browsers width attribute is not the content, but the content, the sum of the padding and border width.

Although there are ways to solve this problem. But the best solution is to avoid this problem. That is, do not add padding to an element with the specified width, but try to add padding or margins to the parent element and the child element.

Width property to IE8 and earlier versions of IE do not support padding and border width.

Resolve incompatibilities IE8 and earlier problems can be an HTML page declaration <! DOCTYPE html> can.