Margins and Paddings
Explore how to specify margins and paddings in CSS using different units and percentages. Understand how spacing affects layout, how cascading rules determine final values, and how browser window size influences percentage-based spacing. This lesson helps you confidently manage space around elements for better web page design.
We'll cover the following...
There are several ways to specify spacing within the margin and padding properties. You can use any size type units to set these values. To demonstrate how you can set them, let’s start with the page defined in the Listing below.
Listing: Specify spacing with the margin and padding
<!DOCTYPE html>
<html>
<head>
<title>Margins and paddings</title>
<style>
.box {
border: 4px solid blue;
background-color: #a0a0a0;
}
.spacing {
margin: 12px;
padding: 24px;
}
.content {
width: 100px;
height: 80px;
background-color: red;
}
table {
border-collapse: collapse;
}
td {
border: 1px dashed black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="box spacing">
<div class="content" />
</div>
</td>
</tr>
</table>
</body>
</html>
The <body> of this page contains a single-cell table that marks the table cell borders with a dashed line to designate the outer edge of the box. There are two nested <div> tags in the table cell. The first is the internal one representing the content with a red rectangle that is wide and ...