Shorthand form:

  • <margin/padding>: <value>; (Same value on all 4 sides)
  • <margin/padding>: <top & bottom> <left & right>;
  • <margin/padding>: <top> <right> <bottom> <left>;
  • <margin/padding>: <top> <left & right> <bottom>;

Longhand form:

  • <margin/padding>-<top/bottom/left/right>: <value>;

Margin & Padding - transparent:

  • margin - we see the background color of the parent element
  • padding - we see the background color of the element

Margin doesn't affect size of the box, but it affects other content interacting with the box.

marginpadding
Spaceoutside the elementinside the element
background-color/image, click regionnot includedincluded
Vertical valuesauto collapse

paragraph of margin-top: 15px & margin-bottom: 20px. There will only be a total space of 20px between the two paragraphs.		doesn't auto collapse

paragraph of padding-top: 15px & padding-bottom: 20px. There will be a total space of 35px between the two paragraphs.