Padding, Margins, and Outlines Oh My

Padding allows a designer to add additional space between elements in the HTML code. By adding padding, the designer can create a cleaner look, and not have all of the elements close together. Below is an example code of the padding attribute in use.

<div style="padding: 10px";>
 This is an example of padding.
</div>

Padding is very simple to use, you just tell CSS how much padding you want to have by using any CSS measurements or a percentage. The padding attribute, like in the example, will add the size of padding around the entire element. You can also add different size padding on each side of an element. You can do this by adding either top, left, right, or bottom with the padding attribute. Padding-bottom will change the padding to the bottom of the element.

The margin attribute in CSS, is similar to the padding but a little different. Padding deals with the space between the element, where as margin sets the space between the information inside an element. The example, will set a two centimeter margin around the text.

Just like the padding attribute the designer could also declare only a margin at the bottom, top, left, or right sides. When using the short hand margin attribute, like in the example, the values set the margins on the top, right, bottom, and left sides in that order.

Outline only works in FireFox 1.5 or higher. This is very similar to the border attribute, in that it adds an outline to the element that it is applied to. Just like the border attribute this attribute also has some additional control that is given to it.

Outline

The outline attribute is a short hand way of setting all the values for an outline in one attribute.

Outline-Color

This attribute sets the color of the outline, by using RGB, hexdecimal, or any of the HTML colors.

Outline-Style

The outline-style attribute sets the style of the attribute. The styles that can be set are none, dotted, dashed, solid, double, groove, ridge, inset, and outset.

Outline-Width

As the name of this attribute suggests, this sets the width of the outline.

Since the outline attribute only works with FireFox 1.5 or above, it is best that you use the border attribute. The border and outline attribute work, and like similar. There is very little difference between that two, and if you use the border attribute you make for sure the code that you have written is able to be cross platform, which saves you from having to create more code for the other browsers.