Using double white space in HTML

Language Help HTML
1

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?

2

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

3

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.

Continuing…

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,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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.

4

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

5

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; }
.credits
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.

6

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.

7

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