CSS learning-margin and padding

ArticleDirectory

• Description

CSSMarginAttribute

MarginAttribute is a short attribute used to set all attributes with four margins in a declaration.

Description

This short attribute sets allMarginOr set the width of the top and outer margins of each side.

The vertical adjacent outer margins of block-level elements are merged, while the intra-row elements do not actually occupy the upper and lower margins. The left and right margins of the element in the row are not merged. Similarly, the margins of floating elements are not merged. You can specify a negative margin value, but be careful when using it.

 

 

The four margins are 10px:

H1 {Margin: 10px}

The top margin and bottom margin are 10 PX, and the left margin and right margin are 2% of the width of the parent element:

H1 {Margin: 10px 2%}

The top margin is 10px, the left margin and the right margin are 2% of the width of the parent element, and the bottom margin is-10px:

H1 {Margin: 10px 2%-10px}

The top margin is 10px, the right margin is 2% of the width of the parent element, and the bottom margin is-10px, and the left margin is set by the browser:

H1 {Margin: 10px 2%-10px auto}

 

CSS padding attributes

 

 

This short attribute sets all elementsPaddingOr set the width of the padding on each side. The padding value set on the non-replaceable element in the row does not affect the Row Height Calculation. Therefore, if an element has both the padding and background, it may be extended to other rows visually, it may overlap with other content. The background of the element extends through the padding. The negative margin value cannot be specified.