Border, margin and padding
« Previous: divs and spans | Next: Boxes »
borders
CSS can be used to add borders to HTML elements; you can also specify the border style, its width and its colour.
border-width
Sets the thickness of the border. You can use any unit for this, but it’s usually best to stick to pixels (px). For example:
p {
border-width: 1px;
}
sets the border-width to 1 pixel around all paragraphs.
You can also set the border to have a different thickness on each side using multiple values.
border-width: 1px 2px - sets the top and bottom borders to 1px, and left and right borders to 2px.
border-width: 1px 2px 3px 4px - sets the top border to 1px, the right border to 2px, the bottom border to 3px and the left border to 4px. If you want to specify widths for all four sides, they should always be written in that order: top right bottom left. So the widths are specified in a clockwise direction from the top.
If this is too confusing, you could alternatively use the separate properties border-left-width, border-top-width etc. However, learning the shorthand can save a lot of time and space.
Note: to create a border, it is not enough to define its width! You will also need to specify a border-style:
border-style
Sets the style of the border. There are many different styles, such as solid, dashed and dotted. You can also set different styles for the different sides in the same way as for border-width, eg border-style: solid dotted solid dashed.
border-color
The colour of the border, which you can define using hex colour codes. Again, you can specify different colours for the different sides, eg border-color: #a00 #0a0 #00a #aaa. If this property is not set, the border will have the same colour as the element text (which can be specified using the color property).
If the width, style and colour is the same for all sides, you can specify them all within the border property, like this:
border: 1px solid #0a0;
You can also use border-top, border-left etc to set width, style and colour to the different sides:
border-bottom: 3px dashed;
border-left: 1px solid #0a0;
margins
The margin is the space outside the element. Surrounding elements are pushed outside of this margin. Any unit can be used. For example:
p {
margin: 1em;
}
sets a one em margin around every paragraph. As with borders, you can specify different margins for the different sides using shorthand:
margin: 1em 0 - sets top and bottom margins to 1em, left and right margins to 0
margin: 0 1em 2em 3em - sets the top margin to 0, right margin to 1em, bottom margin to 2em and right margin to 3em.
You can also use margin-top, margin-left, etc.
padding
Padding is the space in between the content of the element and its border. Again, any units can be used, and you can set different paddings on different sides in the same way as for margins.
Note: avoid applying vertical margins or padding to inline elements; surrounding elements will not respect the vertical margins, and will overflow under or on top of the vertical padding. So
<p>this is what happens<br />
when <span style="background: #cf9; padding: 1em; margin: 1em">vertical margins and padding</span> are applied<br />
to an inline element </p>
shows up like this:
this is what happens
when vertical margins and paddingare applied
to an inline element
Not very pretty, is it?
Browser inconsistencies
All graphical browsers apply a certain amount of padding and/or margin to many page elements by default; for example, list items are indented, and headings and paragraphs have small vertical margins. However, different browsers use different mixes of these properties, in different amounts, which results in pages displaying, well, differently.
To ensure consistency across browsers, we have two options: the first is to use a reset style sheet which resets the margins and paddings of (pretty much) every element to zero, leaving us with a clean slate from which to define our own rules. The alternative is to go without a reset, but make darn sure you remember to define styles for every element which could potentially show up differently across browsers.
Whether or not to use resets has been somewhat controversial; arguments against and for have been put forward by prominent web developers. Whichever way you go, you should be able to build up a standard set of style rules for common html elements so you don't have to reinvent the wheel every time you build a new site.