CSS Property Value How to - padding-top: 50px;

Question

We would like to know how to padding-top: 50px;.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS margin</title>
<style type="text/css">
p {<!-- ww  w  .j a v a2  s. c  o m-->
  padding: 10px;
  background: #fd9b99;
}

p.one {
  padding-top: 50px;
}

p.two {
  padding-right: 200px;
}

p.three {
  padding-bottom: 100px;
}

p.four {
  padding-left: 300px;
}
</style>
</head>
<body>
  <p class="one">This is a paragraph with top padding of 50px.</p>
  <p class="two">This is a paragraph with right padding of 200px.</p>
  <p class="three">This is a paragraph with bottom padding of 100px.</p>
  <p class="four">This is a paragraph with left padding of 300px.</p>
</body>
</html>

The code above is rendered as follows: