What is the difference between margin and padding in CSS?

Padding is the space between the element's content and its border — it is inside the element and shares the element's background color. Margin is the space outside the border — it is outside the element and is always transparent, showing the parent's background. Margins from adjacent elements can collapse (the larger margin wins, they don't add up), while padding never collapses. You can click inside an element's padding area (it registers as a click on the element), but not in the margin area. Both can be set on all four sides independently or with shorthand: margin: top right bottom left.