Using a non-breaking space () has been an old stand-by for controlling space in HTML. CSS, however, gives a great deal more power over how much space goes where, with less code clutter.
Let's say, for example, that you want your letters to be "less crowded." You can accomplish that with the letter-spacing property:
these letters are stretched out
Here's how we did that. We gave the <p> tag (paragraph) a class of "letter." I.e. <p class="letter">these letters are stretched out</p>. In our CSS, we have:
What if it is not each letter you want spaced out, but the spaces between words? Similarly, there is a word-spacing property:
these words are stretched out
Here's how we did that. Once again, we gave a class to the <p> tag (in this case "word"). In our CSS, we have:
One of the most common questions new web designers ask is "How do I get rid of the double spacing?" Now, in truth, two things should be observed: 1) what you are seeing is not double-spacing, but vertical margins on the paragraphs; and 2) it is unwise to eliminate such white space completely. On screen, a bit of white space between paragraphs makes things a lot easier to read.
That said, you may well want to control how much space you have between paragraphs, whether more or less than the browser defaults. In fact, on this page, I have eliminated vertical margins altogether on the <p> tag, substituting them with padding (why I have chosen to do that is not germane to our simple discussion here). What you see before you is coded something like this:
Here is something interesting for you:
Here is a paragraph. These paragraphs have identical math to the rest of the paragraphs on this page - with one difference: padding is zero, and the .22em and .35em have been applied to the top and bottom margins, respectively. In other words, we have reversed the coding on the padding and margins, but used the same numbers.
If you will look closely, however, you will see that these paragraphs don't have as much white space between them as the other paragraphs on this page.
This is because in HTML, unlike padding, margins that have nothing in between (such as a border) are supposed to collapse. The smaller margin simply becomes part of the larger margin, if they differ in value. In the case of this page, that means that while our "standard" paragraphs are .57em apart vertically (.22em plus .35em), the ones with margins applied are only .35em apart.
Be sure to use the power of CSS to control any special control of space you require. If you want the text in your footer to begin 20px from the top, give your footer a 20px top padding:
#footer {
padding-top: 20px;
}
The possibilities are virtually endless. Explore!
Click on the monitor for more info about a site.