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 can use the universal selector - represented as *. This selector specifies every element within the page. So we can get rid of all default margins and padding like this:
* {
margin: 0;
padding: 0;
}
Now we can specify margins and/or padding for individual elements, and the result will be (pretty much) the same in all browsers:
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.5em 0;
}
p {
margin: 1em 0;
}
li {
margin-left: 1em;
}
And so on for other elements. While this is somewhat laborious, it is the only way to be sure of consistent results, and once you have a set of default margin/padding styles, you can reuse it on any other sites you create.