CSS and Spacing
So by now you have your page and all your text styled and formatted the way you want. Now it's time to start giving parts of your page room to breathe, by spacing them out with margins and padding. Henceforth, you will be able to space out all your page's parts down to the pixel.
This page was last updated on 2012-08-21
The CSS Box Model
The box model is a very important concept, one that you must have right in your head before you start tackling all this spacing stuff. All HTML block-level elements have five spacing properties: height, width, margin, border and padding. When discussing these attributes you'll need a diagram to see what part of the spacing we're talking about. Have a look at the diagram below and check out the three areas that surround every block-level page element. Together, they form the box that the element takes up.
CSS Borders are discussed in a separate tutorial. As you can see, margins set the outwards spacing, and padding the inwards. If margin, border and padding widths were all set at 0 width, the box would be right around the element. You can control each of the three spacing variables independently.
When using these properties, we're primarily working with the <div> tag, which you may not have been properly introduced to yet. These DIVisions are the ultimate block-level tag, as they can contain whole pages within them. You can wrap divs around large blocks of text and style away. divs are used to create what used to be known as layers, and can be used as a replacement for tabled layout. We get down to that fully in CSS Layout.
Default margins, borders and padding are all 0, so when you wrap a div around some text, there is no space between its edges and the text. div elements obey the box model strictly, while adding padding etc. to table cells can be interpreted a bit more loosely by browsers. Default widths for all block-level elements are 100%. The height of an element relies entirely on its contents.
All block-level elements also have the properties width and height. The margins, borders and padding you add to each element are then added on to these dimensions. Say you define a paragraph,
p {width: 600px; padding: 5px; }
This paragraph will take up 610 horizontal pixels on the page, as a padding of 5 pixels is added on to each side.
Margins
To set a common-width margin around the box, use an expression like
blockquote {margin: 20px; }
That will push everything away from the element by 20 pixels in every direction. You can set the margin on each side of the box to a different size if you want, by suffixing the side you want affected. So,
p {margin-left: 2px; margin-top: 80px; margin-right: 45px; margin-bottom: -5px; }
The units available to you are the same as always. When specifying separate sides, you don't need to set each value. Your browser will set those left out with its default value for that side, like it always does. Margins can be added to anything — tables, graphics, text; the lot. Also, as above you can give an element a negative margin.
Your browser has a default stylesheet built in, and gives margins to certain elements, like forms and headings. By setting these to 0 in your stylesheet, you can take away the default space that gets put in after these elements. Negative margins allows you to overlap things too, but is not the best method to do so because of browser inconsistencies and what have you — use positioning to achieve all that.
The body tag itself has had some default margins since the dawn of HTML. We used to get rid of these with the topmargin and marginheight attributes et al — a very non-standards-compliant way to go about things. Now we can get rid of this space around your page with a simple CSS declaration:
body {margin: 0px; padding: 0px; }
It's best to add both margin and padding rules, since the browsers are not yet in agreement on which property causes the space. Leave out the HTML attributes.
sourcetip: it is a common error to leave out the units in a spacing declaration, like div {margin: 3; }. Not defining any units means your browser won't know what to do and will ignore the rule. Always remember to add in px, or em, or whatever.
The only time it's ok to leave out a unit is when you're setting something to zero. padding: 0; is a valid declaration, as zero is zero no matter which way you slice it.
There is also a shorthand margin property, which is great if you're setting each side differently. The sequence is clockwise from the top — top, right, bottom, left.
div {margin: 20px 0px 100px 10px; }
Note that there are just spaces between the values, no semicolons.
Padding
Padding works pretty much the exact same way as margin, except it's inside any borders you've put in place. You use the same units and can affect each side separately as before, but you can't use negative values for padding. Wouldn't make any sense anyway. You can use a shorthand property for padding too, identical to the one for margins. Here's some code:
div.header {padding: 6px; padding-bottom: 2px; padding-left: 18px; }
There we are. Now get some borders and become familiar with positioning and you're laughing.
IE5 Bug
One very prominent bug which has caused much frustration amongst the new wave of box model-aware designers is Internet Explorer 5's incorrect interpretation of the box model. Say we define a paragraph as such:
p {width: 650px; padding: 10px; margin: 2px; border-width: 1px; }
In a well-behaved browser this paragraph will appear 676 pixels wide (go on, work it out yourself). However, in IE5 it will appear only 654 pixels wide, with the border and padding properties appearing as part of the width, instead of being added to it.
Microsoft had decided to flout the standards and create their own box model. It must be said, their one is more logical than the standardised W3C model, but this is now considered a bug in IE5, since IE6 supports the correct implementation. Luckily, there's a solution, albeit one that leaves the unpleasant taste of 'hack' in your mouth. It's all explained by Tantek Çelik in his » box model hack page. Not easy to get to grips with, perhaps; and obviously an inconvenience, but something you should definitely incorporate, as IE5 is still fairly widely used.
Element Display Types
You should by now know of the different types of HTML elements — block-level and inline — where block-level elements (e.g. h1) add line breaks around themselves, while inline elements (like em) can be introduced into a page without causing too much disruption.
CSS has a powerful property, display, which allows you to change the way an element displays. You can make an inline element display like a block-level element or vice-versa. So, we could have a line like
p {display: inline; }
With this, all of your paragraphs would display as one long line, as they are no longer block-level elements. Applying this to a bulleted list can have some interesting effects:
ul li {display: inline; }
- List Item 1
- List Item 2
- List Item 3
Look at the source code. In the HTML code the above is coded as an unordered list, but we can make it display linearised by changing its display properties. With this you can use properly structured list markup without having to have it look like a list. To make an <li> look like a normal bulleted item, change it to display: list-item.
Understand that this doesn't actually change the element, just the way it is displayed on your screen. Just because you've made your heading tags display as inline elements doesn't mean you can start putting them inside paragraphs, or any of that.
A further feature of this property is the ability to remove an element from the page entirely through the display: none declaration. Using this you can hide content from CSS-enabled browsers (useful for setting up browser upgrade messages which will only be seen by users with old browsers). This property is also frequently used in DHTML to make an element disappear and reappear. To bring back an element, set its display property to whichever type it is, block, inline etc.
