The difference and usage of padding and margin in HTML

margin (margins) Definition:Margin is used to separate elements from elements, occurring outside of the element itself, and margin is used to separate elements from elements so that elements are irrelevant to each other. Tips:Margin:top right bottom left; (margin:10px 20px 30px 40px) It's given in the way of up, down, and down. suggested when margin should be used:
You need to add white space outside the border.
When the background (color) is not needed in the space.
The gap between the top and bottom two boxes that need to be offset from one another. such as 15px + 20px margin, will get 20px blank. Syntax:(1) margin-left:10px; Left margin
(2) margin-right:10px; Right margin
(3) margin-top:10px; Top margin
(4) margin-bottom:10px; Lower margin
(5) margin:10px; Uniform margin of four edges
(6) margin:10px 20px; Top and bottom, left and right margins
(7) margin:10px 20px 30px; Top, left, bottom margin
(8) margin:10px 20px 30px 40px; Top, right, bottom, left margin The difference between a margin in a block element, an inline element 　　

The HTML is divided into two basic elements, block and inline. The block element begins with a row and is exclusive of one row. The inline element is in line with the other inline elements.

In the block element:

Therefore, the margin in the block-level element, up and down can be arbitrarily set. and the reference datum for the margin of a block-level element is the previous element, which is relative to the previous

The element has a margin distance. If the element is the first element, it is the margin distance relative to the parent element.

In inline elements:

　Margin-top and Margin-bottom have no effect on the height of the inline element (for rows), and if you want to change the line height of inline elements, which is similar to the line spacing of the text, that

You can only use these three properties: Line-height,fong-size,vertical-align. Keep in mind that this affects the inline element height of line-height rather than height.

padding (inner margin)

　　

Definition:Padding is used for the interval between elements and content, so that there is an inner margin between the content and the element, releasing it within the element itself. tip: Padding:top right bottom left; (padding:10px 20px 30px 40px) It's given in a way that's up, down, and down. suggested when padding should be used:
When should you use padding:
You need to add white space to the border beta.
When the background (color) is needed in the space. Syntax:(1) padding-left:10px; Left margin
(2) padding-right:10px; Right margin
(3) padding-top:10px; Top margin
(4) padding-bottom:10px; Lower margin
(5) padding:10px; Uniform margin of four edges
(6) padding:10px 20px; Top and bottom, left and right margins
(7) padding:10px 20px 30px; Top, left, bottom margin
(8) padding:10px 20px 30px 40px; Top, right, bottom, left margin padding differences in block elements, inline elements

The HTML is divided into two basic elements, block and inline. The block element begins with a row and is exclusive of one row. The inline element is in line with the other inline elements.

In the block element:

Therefore, the padding in the block-level element, the upper and lower left and right can be arbitrarily set, will change the inside of the element.

In inline elements:

　The padding that is set on the inline non-replacement element does not affect the row height calculation, so if an element has both an inner margin and a background, it may visually extend to other

may also overlap with other content. The background of the element extends through the inner margin. Not allowed to specify negative margin values, padding elements of inline elements, only padding-

Left and Padding-right have effect, up and down do not recognize;

 

The difference and usage of padding and margin in HTML