Padding, Borders, & Margins

Think of an HTML Element as a box, with the content in the middle. If you do, then around the content is an area called "Padding", around the Padding is an area called "Border", and around the Border is an area called "Margin."

Padding and Margin are both transparent, but the border can have colors and attributes.

An important thing to remember when working with this is that any width or height you set for padding, borders and margins is in addition to the width and height of the content area. So if your content area is 200px by 300px, you have a padding of 5px all the way around, a border of 2px all the way around, and then a margin of 10px all the way around, the actual "size" of the entire box is 234px by 334px.

Edit the code above, changing the width, height, padding, border and margin to different amount of pixels (one at a time) to see the effect each has.

Margins

If you specify just one value for margin, that will be the margin on all four sides. margin: 5px;

If you specify two values for margin, the first will be the top and bottom margin, the second will be left and right: margin: 10px; 20px;

If you specify three values for margin, the first will be the top margin, the second will be left and right, and the third will be bottom. margin: 10px; 20px; 5 px;

If you specify all four values for margin, it will start at the top, then go right, bottom, then left (clockwise from top). margin 10px; 5px; 12px; 7px;

You can also specify margins directly using margin-top, margin-right, margin-bottom, or margin-left instead of simply margin.

Instead of specifying pixels, you could specify the length in cm, in, pt, etc..

Instead of specifying length, you can also use %. This will calculate the margin as a certain percent of the containing element.

You can also use auto;, which allows the browser to calculate the margin.

Padding

Padding is very similar to margin, just using the keyword padding instead of margin (the same goes for padding-top, padding-right, padding-bottom, and padding-left.

Borders

Borders go in the same order as margins and padding (top, right, bottom and left), but have additional properties that can be set.

border-style determines the style of the border. You can choose from dotted, dashed, solid, double, groove, ridge, inset, outset, none or hidden. You can have different styles on each of the four edges if you want.

border-width determines how wide the border is, typically in pixels, but it can be cm, in, pt, etc.

border-color determines the color of the border and you can use color names, rgb codes, or Hex codes.

There's also a shortcut you can use with border, specifying the width, style and color all in one line:

border: 3px solid black;

You can even round the corners on a border by using border-radius. The amount of the rounding is determined by how much of a border radius you give it.

border-radius: 5px;

Change the values in the code above to play with all the various options.