CSS Properties: Margin, Padding, and Border
We can add margin, padding, and border to any CSS selector. The following diagram shows the relationship of these three attributes:
Margins
It may be easiest to think about margin as the distance between one element and another: e.g., the distance of a paragraph tag from a header tag, or the distance of a header tag to the edge of a page. We can get the same effect with both margin and padding, but once we start adding borders, background colors, and background images, there are strikingly different results.
We typically specify margins either in pixels (px) for the screen, and inches (in) for print, although we can also use percentages (%). The long-hand CSS properties for margins are:
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
We might specify only one margin (e.g., margin-left) or two or all of them. (Note that most block-level tags get some sort of margin and padding by default in most browsers, so you'll find yourself specifying all four in many cases).
When we are specifying values for all four margins, we can do it shorthand using the TRBL (top right bottom left) method. Let's set up the margins around our basic paragraph (note that the appropriate CSS shorthand proprty is the singular margin, not the plural:
p {
margin: 0px 0px 10px 25px;
}
This sets the top margin to 0px, the right margin to 0px, the bottom margin to 10px, and the left margin to 25px. Sounds simple, doesn't it? And provided the <p> tag in our markup doesn't come after an element with bottom-margin set, it will be flush against that element.
Padding
Padding is best thought of in terms of content; if content is a house, padding is its yard. That is, the yard is part of the land owned by the person who owns the house. We set padding with four properties similar to margin:
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
As with margins, we may specify one more more of them. The short hand for padding is the same as margins, using the TRBL shorthand:
p {
padding: 0px 0px 0px 0px;
}
Since in this example we want all of the padding set to 0px for this paragraph, we could also specify it with a single value:
p {
margin: 0px;
}
Note that you can either specify all values as one digit, or all four values—you can't include just two or three values.
Borders
Borders work pretty much the same way as margin and padding, except they require additional attributes (we'll skip the longhand versions of these, as they are beyond impractical).
- border-top: width style color;
- border-right: width style color;
- border-bottom: width style color;
- border-left: width style color;
Border width is typically declared in pixels (px) for the screen, and points (pt) for print; although there are many styles, style is most commonly declared to be either solid, dotted, dashed, double, groove, or none (and actually "none" is helpful in certain cases, e.g., most browsers put a blue border around all images appearing inside of a hyperlink (<a href="somepage.htm"><img src="flower.jpg" alt="Picture of flower that links to somepage.htm" /></a>), which we can fix in the CSS using a contextual selector:
a img {
border-style: none;
}
And color can, of course, be either a shorthand CSS value like red or yellow, or a hexadecimal number. So to put a solid, 1-pixel red border around a paragraph, we'd write the following CSS:
p {
border: 1px solid red;
}
To see an example of margins and padding in action, go here.
Updated on Wed. Sep. 12 2007 at 01:11PM