CSS box model and margin overlap

In CSS, width and height refer to the widths and heights of the inner regions. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the total size of the element box. (The actual footprint of the div has changed.)

But:

Once the appropriate DTD has been set for the page, most browsers will render the content as shown above. However, the rendering of IE 5 and 6 is not correct. According to the specification, the space occupied by the element content is set by the Width property, and the padding and border values around the content are calculated separately. Unfortunately, IE5. X and 6 use their own non-standard models in quirks mode. These browsers have a width property that is not the contents, but the sum of the content, padding, and width of the border.

Although there are ways to solve this problem. But the best solution now is to avoid the problem. That is, instead of adding an inner margin with a specified width to an element, try adding padding or margins to the element's parent and child elements.

For questions about margin overlap, please refer to: http://www.hujuntao.com/web/css/css-margin-overlap.html

Try to avoid this kind of problem.