Let CSS give you some space

Something I still see a lot on personal page is the use of <br /> tags or empty paragraphs like this <p>&nbsp;</p> to space their text, like put some extra space between two sections or at the end of a page.

There is a better option to give you that extra space you need. Margins! Use css to give that element a bigger margin.

Suppose your last paragraph on your page needs more space. Instead of writing this:

<p>This is my last paragraph</p>
<br />
<br />
<br />

You can just leave those <br />‘s out and create a CSS class like this:

.lastp {
	margin-bottom: 6em;
}

Assign the lastp class to your last paragraph (like this: <p class="lastp">) and it will result in exactly the same result.
Maybe some explaining about the 6em. 6em stand for 6 times the hight of the letter M. Since we had 3 <br /> tags and the space between lines is 1em (by default, you can also change this), the result will be the same.

Added 2003/12/19: I just want to point out that this is also possible when you need some space above your paragraph. Just change the margin-bottom into margin-top in your CSS and you will have 3 lines of space above your paragraph instead of under it.

2 Responses to “Let CSS give you some space”.

  1. Glad that I saw this at last. Very clever indeed:)

    As you can see, my IE is working again. I just went to bed and everything was OK when I woke up.

  2. I’m glad it works again, Iva.

Comments are closed.