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

HTML CSS TUTORIALS » Box Model » Box model Basics »

The margin Properties


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

p {
  background-color: white;
  text-align: center;
}

.inches {
  margin-right: 2.5in;
}

.margin-l25 {
  margin-left: 25%;
}

.ems {
  margin-top: -.75em;
}

.percentage {
  margin-bottom: 15%;
}

.auto {
  margin-left: 25%;
  margin-right: auto;
}
}
</style>
</head>
<body>
<p>The margin properties control the space around
the <i>outside</i> of an element.</p>

<p class="inches">The right margin is set at 2.5 inches.</p>

<p class="margin-l25">Left margin is set at 25%.</p>

<p class="ems">Top margin is set to -.75 em.</p>

<p class="percentage">Bottom margin set to 15%.</p>

<p>No margin settings</p>

</body>
</html>