Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Margins and Paddings

Margins and Paddings

In this lesson, we say hello to margins and paddings. Let's begin!

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 100pixels100 pixels wide and 80pixels80 pixels ...