The difference between the standard box model and the ie box model

The standard box model and the IE box model are two box models in CSS. Their main difference lies in the way width and height are calculated.

Standard box model (content-box): Width and height only include the content area, excluding borders and padding. This is the default behavior of CSS.

IE box model (border-box): width and height include content area, border and padding. In IE8 and previous versions, this was the default behavior of CSS.

For example, let's say you have a div element with a width set to 200px, a border of 10px, and a padding of 20px. When using the standard box model and the IE box model, the calculated width and height are as follows:

Standard box model: width = 200px + 2 * 10px + 2 * 20px = 260px height = specified height

IE box model: width = 200px height = specified height

Guess you like

Origin blog.csdn.net/song19990524/article/details/134993965