Margin and Padding

25 Nov 2006 > 0 Comments

Creating a <div> based Template using CSS (Part: 8 )

So far the template looks pretty untidy. The content needs to be spaced out a bit, using the padding: and margin: properties in the stylesheet.

In the CSS the majority of selectors contained in the vertical columns (#c2, #c3, #c4), are grouped together, with the margin’s value set to zero.

h1, h2, h3, h4, h5, h6, p, ol, ul
{margin:0;}

The top and bottom margin’s need to remain at zero, otherwise the content divisions (without padding) will be pushed apart. The left and right margins, however, can be increased without any adverse effects on the layout.

Rather than use Margin to create vertical space between the elements, we can use padding.

I gave a brief explanation of how margin and padding work, earlier in the tutorial, if you want to check it out.

I am using ems as measurements, as with the fonts.

Unfortunately, I need to use the Margin property for the, ol, ul, table, and .hr.

First, I’ll remove the ordered and unordered list from the group…

CSS

h1, h2, h3, h4, h5, h6, p
{margin:0 0.8em; padding:0.3em 0;}

…and re-group them with the table, and horizontal rule class, like so:

CSS

table, .hr, ol, ul
{margin: 0.5em 0.8em;}

You’ll notice that adding a margin value to the Ordered List has also affected the horizontal menu. luckily, this is not a problem as we need to add some padding to both #c1 (the header), and #c5 (the footer) anyway

Group both id selectors together, and added the padding: property and value:

CSS

#c1, #c5 {padding:0.8em 0;}

Also, add some content in the footer, to get an idea of how it looks:

Markup

<div id="c5">
<p>This template is almost finished by mahud
&#169;1996</p></div>

img also needs it’s own margin value, which can be added alongside the border-style property and value:

CSS

img {border-style: none;
margin: 0.7em 0 0;}

This is how things are coming along so far . I have also arranged the Stylesheet by placing the selectors into four main categories:

1. Type Selectors
2. ID Selectors
3. Class Selectors
4. Grouped Selectors

< Back to everything
Keep going… >

Related Posts

• Reduce Table Cell Background Padding (ProBoards CSS Tutorial)
• Ordered and unordered lists (create a horizontal menu/navi bar)
• Bullet images for list items
• Adding Headings, Paragraphs, and Blockquotes
• Tag.al.icio.us