Correcting the misunderstanding of width in CSS

When the value of width is a percentage, it indicates that the length of the element is calculated relative to the parent container.

For Padding-right and padding-left better understanding is also relative to the parent container to calculate, but the error is padding-top and Padding-bottom, it is easy to think is the height to calculate, in fact, also is calculated relative to the width .
The same is true of the same magin.

The following turns from W3school to width resolution:

In CSS, width and height refer to the widths and heights of the content area. Increasing the padding, borders, and margins does not affect the size of the content area, but increases the size of the element box.

Assume that there are 10-pixel margins and 5-pixel padding on each edge of a box. If you want this element box to reach 100 pixels, you need to set the width of the content to 70 pixels, see:

#box {  width:70px;  margin:10px;  padding:5px;}

Tip: Padding, borders, and margins can be applied to all edges of an element or to individual edges.

Tip: Margins can be negative, and in many cases negative margins are used.

Browser compatibility

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.