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

Question

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

Answer


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

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

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

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

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

The code above is rendered as follows: