Margins Paddings - HTML Tutorial
Now that we’ve covered borders, let’s return to the box model, one of the fundamental concepts in CSS layout.
Figure 3.1. The Box Model
Padding
In the previous section on borders, you may have noticed that text often sits quite close to the edge of the border.
Padding is the space inside an element’s border. It pushes the content away from the border, creating breathing room. CSS provides four padding properties: padding-top, padding-bottom, padding-left, and padding-right. You can assign values using pixels (px), relative units (em), percentages, or other valid CSS length units.
Example 3.19 demonstrates non-uniform padding using a CSS class:
<head>
<style>
div {
background: #444;
color: white;
}
div.padded {
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0.25in;
padding-left: 5em;
}
</style>
</head>
<body>
<div>No padding (default)</div>
<br>
<div class="padded">
Padded<br>
Top: 10px; Bottom: 0.25in<br>
Left: 5em; Right: 0px
</div>
</body>Notice that the padded div has different amounts of padding on each side. The default div has zero padding, which is the browser default.
Padding Shorthand
You can also use the padding shorthand to set padding for multiple sides at once:
padding: 20px;― All sides 20pxpadding: 20px 80px;― Top/Bottom 20px, Left/Right 80pxpadding: 20px 80px 10px;― Top 20px, Right/Left 80px, Bottom 10pxpadding: 20px 80px 10px 40px;― Top, Right, Bottom, Left in order
<head>
<style>
div {
background: #444;
color: white;
border: #600 6px ridge;
}
div.one { padding: 20px; }
div.two { padding: 20px 80px; }
div.three { padding: 20px 80px 10px; }
div.four { padding: 20px 80px 10px 40px; }
</style>
</head>
<body>
<div class="one">Padding: 20px (all)</div>
<br>
<div class="two">Padding: 20px 80px (top/bottom, right/left)</div>
<br>
<div class="three">Padding: 20px 80px 10px (top, right/left, bottom)</div>
<br>
<div class="four">Padding: 20px 80px 10px 40px (top, right, bottom, left)</div>
</body>Margins
Margins are similar to padding but add space outside the border. You can set individual margins (margin-top, margin-bottom, margin-left, margin-right) or use the margin shorthand, which works like the padding shorthand.
<head>
<style>
div.even {
background: #cfc;
border: 1px solid;
padding: 5px;
margin: 40px;
}
div.uneven {
background: #fcf;
border: 1px solid;
padding: 5px;
margin: 20px 10px 40px 80px;
}
</style>
</head>
<body>
<div class="even">Margin: 40px (all), Padding: 5px</div>
<div class="uneven">Margin: 20px 10px 40px 80px, Padding: 5px</div>
</body>Margins can also collapse vertically. For example, the bottom margin of one element and the top margin of the next may combine into a single margin rather than adding together. This behavior simplifies vertical spacing without extra adjustments.
Styling with the Box Model
Understanding padding, borders, and margins lets you create visually appealing layouts. For instance, you can style inline text using borders, or give blockquote elements padding, borders, and background colors for emphasis.
<head>
<style>
blockquote { background: #e0e0ff; padding: 10px; border-left: 4px #0000cc solid; margin: 10px 0; }
blockquote p { margin: 10px 0; }
</style>
</head>
<body>
<blockquote>
<p>"I also have a paper afloat with a theory of light..."</p>
</blockquote>
</body>This approach allows you to visually separate quotes while maintaining consistent spacing between paragraphs inside the blockquote. Adjust padding, borders, and margins to achieve the desired layout.