The difference between margin and padding in css_html/css_WEB-ITnose

Written in front

I have been sorting out the questions encountered during the interview these days, one of which is the difference between margin and padding. Although what I said at the time made the key points clear, I was still a little confused, so I looked it up again. Combined with the previously compiled content, we conducted an in-depth study.

[HTML/CSS] box model, block-level elements and inline elements

[HTML/CSS] margin attribute usage

Difference

①margin: Yes Outer spacing, padding: is the inner margin. For example, there are two 2mX2m houses, and there is a distance between the houses. Now you are sitting in the middle of one of the houses. At this time, there is a distance between you and the wall of the house where you are. We can understand it as CSS padding. The distance between your house and another house is the margin.

②For example, there is a box on the table and an object is placed in the box! Think of this box as yours element or DIV, then the distance between this box and the content inside is padding, and the distance from the edge of the table in this box is margin!

③

www.soojs.com

padding-top: is the height of www.soojs.com from the div margin-left: is the width of the div from the body.

Summary

The difference between margin and padding in CSS examined is easier to distinguish through comparison.