CSS CSS Layout Basics Getting Started with CSS Layout Why Vertical Margins Collapse

abdirahman liban
abdirahman liban
Pro Student 2,163 Points

margin and padding confusion

after I watched many courses of html and css in treehouse I'm still confused about margin and padding

3 Answers

Erik S.
Erik S.
9,789 Points

Padding is applied to the inside of the border of your element so you can control how far the content is away from the border.

Margin is applied to the outside of the border of your element, so you can control how far the element is away from other elements.

Special usage: if you use a negative margin, you can pull the element closer to other elements. and also good to keep in mind: padding will increase the dimensions of your element, whereas margin won't.

John Satterfield
John Satterfield
13,695 Points

Erik Schmok explained the differences very well.

If you need further explanation and examples you can always reference the w3schools website on padding and margins here: http://www.w3schools.com/css/css_margin.asp http://www.w3schools.com/css/css_padding.asp http://www.w3schools.com/css/css_boxmodel.asp

Padding: Space in between the content and the content box edge.

Margin: Space set around the border box (content box + padding (optional) + border) relative to other elements.