Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
Margins & Padding
Margins are the space outside of an element. Padding is the space inside an element.

Margins to not add height or width to an element, but padding does. So if you set an elements height and width to 100px, and it's padding to 10px, it's total height and width will be 120px.

margins vs padding

You can set the margin or padding individually per side like this:

body {
      margin-top: 0px;
      margin-right: 10px;
      margin-bottom: 0px;
      margin-left: 10px;
}

Or, you can set them all in one line in (top, right, bottom, left) like this:

body {
      margin: 0px 10px 0px 10px;
}

If you leave some blank, it will use it's opposite side. The example below sets the top margin to 0px and the right margin to 10px - then, because the bottom margin isn't set, it uses 0px (set for top margin) as the bottom margin, and because the left wasn't set, it uses the left's margin (10px).

body {
      margin: 0px 10px;
}

Here are the CSS margin elements to help you adjust how things align to the edge of your page.

You can also use negative numbers:

body {
      margin-top: -2px;
      margin-left: -2px;
}

IMPORTANT NOTE:
Browsers set their own default margin and paddings to many elements, but it's a different amount for each browser. To combat this (and start with a clean slate), you should start your CSS file with the following code:
* {
      margin: 0px;
      padding: 0px;
      }

[BACK to RESOURCES]