Why six blanks and five blanks result in same effect?

Question

<html>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello<br/>hello<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello<br/>hello<br/>
</html>

To open it with firefox.

The are different effect.

2.still problem for

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hello<br/>hello<br/>

There are five blanks here ,why only three blanks displayed on the web page?

It's not the "same effect", look closer – Mat Jan 03 '16 at 13:55 — Mat, Jan 03 '16 at 13:55
Use a non-proportional font or, better yet, use a `CSS`. – SwiftArchitect Jan 12 '16 at 07:37 — SwiftArchitect, Jan 12 '16 at 07:37

score 16 · Answer 1 · answered Jan 03 '16 at 14:04

16

It clearly shows its not the same effect.

answered Jan 03 '16 at 14:04

Peter Aron Zentai

11,482
5
41
71

sorry for my carelessness. – showkey Jan 03 '16 at 14:10
2

And it is always better to use padding-left or margin-left in css to do this kind of indentation. – cytsunny Jan 06 '16 at 02:03

score 4 · Answer 2 · answered Jan 07 '16 at 21:11

One &nbsp is one extra space before your content. So it cannot show the same result. You can use pure css for that matter.

<html>
<body>
    <div style='padding-left:0px;'>Hello</div>
    <div style='padding-left:50px;'>Hello</div>
    <div style='padding-left:25px;'>Hello</div>
    <div style='padding-left:0px;'>Hello</div>
</body>
</html>

Output:

Cheers!

score 3 · Answer 3 · edited Jan 12 '16 at 15:53

3

Using   is not a good approach. Instead use css padding to achieve the required effect.

edited Jan 12 '16 at 15:53

undo

257
3
19

answered Jan 11 '16 at 06:52

Rovi

259
1
3

score 2 · Accepted Answer · answered Jan 06 '16 at 09:40

2

The effect is not clearly the same. But I think what @it_is_a_literature meant was why is the "h" in first line starting from the second "l" from the second line. My answer to it is that, not every character has a equal width or dimensions. For eg. the "l" in hello takes less space than "e" in the same word.

The " " works like a space bar. So there are 5 spaces not 3.

answered Jan 06 '16 at 09:40

K.Shrestha

567
3
8

To PeterAronZentai's point, you can use the `` tag to get monospaced output (but that's not what you want here; use padding as others suggest). – Autumn Leonard Jan 12 '16 at 22:37

score 1 · Answer 5 · answered Jan 12 '16 at 23:23

Main font families haven't a regular size for each character (eg. : 'l' is thinner than 'L'). In other words, 5 spaces takes small place than 5 characters in "hello".

If you need regular character spacing (making ASCII art ?), you should use monospace font family like Courrier or Lucida Console with a CSS class like so :

.monospace { font-family: "Courier New", Courier, monospace; }

Here is a Plunker sample to see the differences.

Why six blanks and five blanks result in same effect?

5 Answers5