html 添加physical,html - Physical Width vs Content Width? - Stack Overflow

It depends on the box model the browser is using. The two possibilities are:

content-box: the width of an element excludes the padding and border properties. This is the default model for everything except IE in quirks mode.

border-box: the width of the element includes the padding and border.

In newer browsers you can choose which to use using the box-sizing attribute.

Therefore, given the code you provided in the content-box model the width of the div will be:

400 # from width

+ 20 # from padding-left

+ 10 # from padding-right

+ 4 # from the left and right borders

+ 20 # from the left and right margins

-----------------------------------------

Physical width = 454

Content width = 400

While the border-box model will set the width of the div to:

366 # the declared width is shrunk by the amount of padding and border

+ 20 # from padding-left

+ 10 # from padding-right

+ 4 # from the left and right borders

+ 20 # from the left and right margins

-----------------------------------------

Physical width = 420

Content width = 366