Getting Started with CSS: CSS2 box model

Css

CSS2 Box Model

The box model in CSS2 is the key to the layout positioning in the design, and any selector follows the box model specification, such as <div>, <p>, <a> ... The box model contains (outer patch) margin, (background color) Background-color, (background image) Background-image, (inside patch) padding, (content) content, (border) border. The diagram below is a schematic diagram of the CSS box model

PLANE schematic

3D schematic (original: hicksdesign)

FLASH schematic model

What needs to be explained is: IE and Mozilla browser to the box model interpretation is inconsistent, resulting in our positioning difficulties, the main difference is:

IE calculates the distance between 2 Div, will calculate the 1px border, and Mozilla does not; After setting the width of the div, if you add a value to padding, ie will subtract this value in the width, and M ozilla will add this value on the width basis.