Spacing Techniques

[keyplyr]

I have vertical columns on either side of page containing text, text links and image links that I have previously been spacing using clear gifs. I wish to replace these spacer gifs with CSS, but not sure about the proper method.

In StyleSheet:

p.space {
text-align:center;
margin:80px 0;
}

In HTML between each link or image:

<p class="space">

This works, but is there a better way to do this? Thanks.

[DrDoc]

Yes, that would work. If you want some space between your element, margin is what you should use. :)

[Rincewind]

You can also use padding to create whitespace. The difference between padding a margin is that padding adds space between the elememts content (text or image) and the border, where as margin adds space between the border of the element and next element on the page. If you have no border, then both padding an margin have identical effects.

[drbrain]

Rather than using a specific spacer element, why not simply add margin/padding to the images and links themselves?

#content :link,
#content img {
padding: 0 1em;
}

<div id="content">
... <img> ... <a> ... etc.
</div>

[DrDoc]

If you have no border, then both padding an margin have identical effects.

Actually, they don't... :)

.marg {
margin: 15px;
}
.padd {
padding: 15px;
}

<p class="marg">Test test test test test test test</p>
<p class="marg">Test test test test test test test</p>
<p class="marg">Test test test test test test test</p>

<p class="padd">Test test test test test test test</p>
<p class="padd">Test test test test test test test</p>
<p class="padd">Test test test test test test test</p>

[keyplyr]

Thanks everyone

Rather than using a specific spacer element, why not simply add margin/padding to the images and links themselves? - drbrain

I do use that technique in other parts of the site, but here it would add a lot of extra code.

Thanks again.