Using double white space in HTML


Hello my name is Wesley Lawshea. I am a beginner writing HTML. I am a former computer technician who is trying to re introduce himself back into programming and computer repair. I am having a problem using double white space in HTML when writing a list. Can you give me a suggestion on how to solve this problem?

Welcome to our forums! Please Introduce Yourself

I know a little about lists and spacing. What seems to be the problem?


HTML ignores white space, for the most part. One space character will be parsed, but subsequent spaces will not be. Line breaks in the markip render as a single space.


Recall that <li></li> are empty blocks, like <div></div>. Anything we can put in a DIV, we can put in an LI. We can also apply padding, but this is a nightmare. Better to give direct child elements a margin.

I mention the CSS approach only because we should avoid the cheat method of inline non-breaking space entities.

<p>this text will have two spaces between here &nbsp;and here.</p>

Notice that the space is parsed as a space, the entity as a character. By avoid, I don't necessarily say we should not do this, but it is not the best practice, especially when we see an author padding lines out with,


The true purpose of a non-breaking space is to preserve names and phrases on the same line, never breaking them up.

<p>The 26th POTUS was, Franklin&nbsp;D.&nbsp;Roosevelt.</p>

This markup will force a line break after 'was' if the view port is less than needed width.


Hello Andrew.
The problem I am having is double spacing a list. A list of items below each other vertically.


All right, I just learned this last week and to remind myself, I have a wonderful html/css book by Jon Duckett I looked at to remember. I will type the example below.
h1, h2 {
text-transform: uppercase;
letter-spacing: 0.2em; }
font-weight: bold;
word-spacing: 1em; }

Of course, this is all just to help you see that what you want to probably use is "word-spacing" and then experiment with how much or how little spacing you want by typing a number in ems like you see there.


Line-spacing can be done in a number of ways in lists.

li {
    margin: 1em 0;

This will put one blank line between each list item. If you do not want a blank line, set the margin to zero.

li {
    margin: 0;

Bear in mind that UL and OL have default margins and padding, which are inherited by LI. To gain complete control, reset these to zero.

ul {
    margin; 0;
    padding: 0;

Now the LI is free to be styled.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.