Understanding the box model

There are two types of box models: W3C and IE box models

The box model includes margin, border, padding, and content

W3C element width = content width

IE's element width = content+padding+border

I personally think that the box model defined by W3C is more reasonable than the box model defined by IE. The

element The width should include border and padding. This is the same as the box in our real life.

W3C also recognized its own problem, so it added a new style box in CSS3- sizing,

contains two attributes content-box and border-box.

content-box: width=content+padding+border

border-box: width=width (width specified by style)

1. For row-level elements, margin-top and margin-bottom are invalid for upper and lower elements, and margin-left and margin-right are valid

2. For adjacent block-level elements, margin-bottom and margin-top value methods

1) All are positive numbers: take the maximum value Distance=Math.max(margin-botton,margin-top)

2) All are negative numbers: take the minimum value Distance=Math.min( margin-botton,margin-top)

3) The top is a positive number and the bottom is a negative number or the top is a negative number and the bottom is a positive number: Addition of positive and negative distances=margin-botton+margin-top

The above is the detailed content of Understanding the box model. For more information, please follow other related articles on the PHP Chinese website!