CSS2 Box model
The box model in CSS2 is the key to typographical positioning in design. Any selection operator complies with the box model specifications, such as <div>, <p>, <a> ...... The box model contains (external patch) margin, (background color) background-color, (background image) background-image, (inner patch) padding, (content) content, (border) border. The following figure shows the diagram of the CSS box model.
Plane diagram
3D schematic (source Image: hicksdesign)
Flash schematic model
It should be noted that IE and Mozilla have different interpretations of the box model, which makes it difficult for us to locate. The main difference is:
When IE calculates the distance between two divs, it will calculate the border of 1px, but mozilla does not; after setting the div width, if you add a value to padding, IE will subtract this value from the width, and M ozilla will add this value based on the width.
