CSS Layout How to - Compare padding property default values

Question

We would like to know how to compare padding property default values.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p {<!-- w w  w .j  a v  a  2s .  c  om-->
  background: #f0e68c;
}

p.one {
  padding: 20px;
}

p.two {
  padding: 35px 15px;
}

p.three {
  padding: 20px 100px 50px;
}

p.four {
  padding: 10px 30px 50px 150px;
}
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p class="one">This paragraph has equal padding of 20px on all
    sides.</p>
  <p class="two">This paragraph has a top and bottom padding of 35px
    and a left and right padding of 15px.</p>
  <p class="three">This paragraph has a top padding of 20px, left and
    right padding of 100px and a bottom padding of 50px.</p>
  <p class="four">This paragraph has a top padding of 10px, right
    padding of 30px, bottom padding of 50px and a left padding of 150px.</p>
</body>
</html>

The code above is rendered as follows: