Cascading Style Sheets (CSS) by Example

Setting Margins

The difference between margins and padding is that margins exist outside an element, and padding exists inside an element (surrounding the content). If the element has a background color or image assigned to it, the image is displayed in both the content and padding areas, but not in the margin area. Margin areas are always transparent, displaying the background of the parent element. The exception is if an element doesn't have a parent element to which display properties can be assigned, such as the BODY element, in which case any background color or image is displayed in both the margin and padding areas.

Another way to understand this is that the margin is the distance between the outer edge of an element (content and padding) ...