Css box model and css Model

Css box model and css Model
Css Box Model

(1) padding

Padding
That is, the blank area between the border and content
H1 {padding: 10px 0.25em 2ex 20% ;}
Set the padding according to the order of top, right, bottom, and left.

Single Side padding attribute
Padding-top
Padding-right
Padding-bottom
Padding-left

(2) Border

Each border has three aspects: width, style, and color.
Border style:
Border-style Value
None No border
Hidden No border
Dotted border
Dashed dotted line
Solid line
Double line

Define a unilateral style:
Border-top-style
Border-right-style
Border-bottom-style
Border-left-style

Border Width
Border-width
Two Methods: specify the length value or use the keyword (thin medium thick)

Defines the width of a single side.
P {border-style: solid; border-width: 15px 5px 15px 5px ;}
Set the Border width from top right to bottom left
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width

Border color
Border-color, which can accept up to four color values at a time

Define a single side color
Border-top-color
Border-right-color
Border-bottom-color
Border-left-color

Transparent border
Border-color: transparent;

(3) margin

When the margin is specified to be less than 4 values, the rule is as follows:
If the left margin value is missing, the right margin value is used.
If the value of the margin is missing, the value of the margin is used.
If the value of the right margin is missing, the value of the top margin is used.

Unilateral margin attributes
Margin-top
Margin-right
Margin-bottom
Margin-left

(4) Merge outer margins

When two vertical margins meet, they are merged into an outer margin to take the vertiser of the two.
1) one element appears on another element
2) one element is included in another element.
3) Merge the upper and lower margins of null Elements