css padding and margin difference code example

Example 1: css padding

padding: 5px 10px 15px 20px; //top right bottom left

padding: 10px 20px;//top & bottom then left & right

padding-top: 5px; //just top padding
padding-right: 10px; //just right padding
padding-bottom: 15px; //just bottom padding
padding-left: 20px; //just left padding

Example 2: margin vs padding

Margin is on the outside of block elements, padding is on the inside.

Use margin to separate the block from things outside it
Use padding to move the contents away from the edges of the block.

Main differences:
- Vertical margins of adjacent items will overlap, padding will not
- Padding is included in the click region and background color/image,
but not the margin

Example 3: css padding vs margin

/* Answer to: "css padding vs margin" */

/*
  Margin is outer space of an element, while padding is inner space
  of an element. Margin is the space outside the border of an
  element, while padding is the space inside the border of it.
  Margin accepts the value of auto: margin: auto , but you can't
  set padding to auto.

  For more information, head over to:
  https://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css
*/