Padding margin border and element size

Element occupancy width = element width +padding+border+margin

Note that margin only separates elements, does not make the elements larger, and padding causes the elements to become larger, which means

Element true width = element width +padding+border

Border in the outer layer of the element

First, about padding

1. Set the inner margin of the object. The default value is 0.

2, if provide all four parameter values, will be in the upper, right, lower and left in the order for four edges.

3. If only one is provided, it will be used for all four sides.

4, if the provision of two, the first one for the upper and lower, the second acting on the left and right.

5, if the provision of three, the first to be used on, the second acting on the left, right, the third effect on the next.

6 . Inline object to use this property, you must first set the height or width property of the object (in the style sheet, write width and height in front of padding), or set the Position property to absolute. Negative values are not allowed.

7, the inner margin is always transparent, and set the padding will directly affect the size of the object.

Tips:

(1) Setting the Padding property is equivalent to increasing the size of the object. Original width 270px, height 175px, set padding:30px 0 0 40px The size of the object should be a width of 310px, high 205px, to maintain the original size must be subtracted from the corresponding width of the height. So, the width of the object is 270-40=230px, and the height is 175-30=145px.

(2) padding is not inherited.

(3) The Padding property can be set separately. Padding-top, Padding-right, Padding-bottom, padding-left respectively for the upper, right, lower and left four sides. The syntax and parameters are the same as the padding settings.

Ii. about margin

(1) Set the outer margin of the object. The default value is 0.

(2) If all four parameter values are provided, the top, right, bottom, and left orders are used for four sides.

(3) If only one is provided, it will be used on all four sides.

(4) If two is provided, the first one is for the top, bottom, and the second acting on the left and right.

(5) If three is provided, the first one is used on, the second acting on the left, the right, and the third acting on the lower one.

(6) Inline object to use this property, you must first set the height or width property of the object, or set the Position property to absolute.

(7) The margin is always transparent, and setting the margin does not directly affect the size of the object, only the relative position is changed.

Tips:

(1) The margin attribute is not inherited. Because of the double-sided bug will often cause the inline object to set the margin after the parent object to the left of the actual value does not match, encountered such a problem to add display:inline, meaning that the object is considered as a row-level element.

(2) Setting the upper and lower margins of inline objects will not have a bilateral distance problem. Margin does not have inheritance, when inline objects set left and right margins, double margins are completely IE bugs.

(3) The margin attribute can be set separately. Margin-top, Margin-right, Margin-bottom, margin-left respectively for the upper, right, lower and left four sides.

Padding margin border and element size