The Padding Properties : Box model Basics : Box Model HTML CSS TUTORIALS

HTML CSS TUTORIALS » Box Model » Box model Basics »

The Padding Properties


 
<html>
<head>
<title>The Padding Properties</title>
<style>
body {
  background-color: silver;
  font-size: 1.5em;
}

p {
  background-color: white;
}

.padtop {
  padding-top: 20px;
}

.padright {
  text-align: right;
  padding-right: .50in;
}

.padbot {
  padding-bottom: 1em;
}

.padleft {
  padding-left: 25%
}

.pad {
  padding: 10%
}
</style>
</head>
<body>

<p class="padtop">Top padding of 20 pixels</p>

<p class="padright">Right padding of .50 inches</p>

<p class="padbot">Bottom padding of 1 em</p>

<p class="padleft">Left padding of 25%</p>

<p class="pad">Padding of 10% all around</p>

</body>
</html>