Adding blank row to a page in HTML

[Bubzeebub]

How is this done? I would like to add a few rows between paragraphs.

[tedster]

Use CSS to give your paragraphs a suitable margin-top. If you don't always want that much space, instead of using the margin-top rule for p, create a class and assign that class only to the paragraphs where you want the extra space.

[vkaryl]

Wouldn't it be less complicated just to use "<p>&nbsp;</p>" only where you need the space? Validates all over the place far as I can tell.... why add a separate class etc. just for this?

[tedster]

Two reasons I can think of. First, you may want something other than an exact 1 em space between paragraphs. I like the look of 1.5 em in many spots.

Second, <p>&nbsp;</p> requires 13 extra characters, but <p class="t"> requires only 9 extra characters and is (ahem) semantically correct. The empty paragraph really isn't a paragraph at all, it's really a rendering instruction.

And if you almost always want the extra space, then it requires NO extra characters in the HTML, because you just declare the rule for p in your CSS.

[Reid]

another reason - some browsers will display &nbsp; all over your pages.
looks pretty ugly

edited to fix speeling error

[vkaryl]

tedster: I stand corrected. You are as usual right, and thanks for pointing out the obvious (sometimes I am just TOO dim to live!)

Reid: possible, though I check pages in a GOB of browsers and haven't ever seen this occur. I do NOT have a way of checking mac browsers as yet, so if that's where it might happen that would account for me not seeing it.

[tedster]

vkaryl, you asked "Wouldn't it be less complicated..." and the answer is yes, the &nbsp; is definitely less complicated.

I can't tell you how often I've tried to change a layout and not been able to figure where extra padding/margin was coming from. Your original way has the virtue of being always and immediately obvious.

[encyclo]

The trouble with

<p>&nbsp;</p>

is that it's meaningless - and you're not really any further forward than before. Same with

<br>

for that matter.

If you set the margin in the CSS, you can fine-tune it, whereas

<p>&nbsp;</p>

will just give you the default top and bottom paragraph margin (which may vary from browser to browser) or you can double the gap compared to your defined paragraph CSS style. If later you want to change the gap, you can just make the change in the CSS file rather than messing with clearing the cruft from each page.

Would you use

 

to move an item over to the right?

[vkaryl]

No, not any more.... pretty sure I did years ago!

However, there could be a basic difference in what you're saying, encyclo, and what a lot of people need: unless you're tweaking pixelish, you don't NEED a pixel-perfect solution in the CSS margin settings. I'd bet a lot of people take a look at a crammed/cramped page and say "Oy. I need some neg space here!" They aren't necessarily looking for pixelated perfection - they're looking for AIR!

And for those situations (assuming that not too many browsers seriously trash the page), the paragraphed non-breaking space is fairly sensible. Equally obvious, there will be at some point the need on a well-designed and coded page to use that pixel-perfect solution - but quick and dirty though still validates is great if what you want is to give a page a quickie expansion along the lines of "don't fence me in!"

[Reid]

Lynx browsers definitely display &nbsp;
I suppose it depends on the type of website you have and who you expect to view it wether you worry about this or not.

[encyclo]

Lynx browsers definitely display &nbsp;

I'm not sure which version of Lynx you are using, but mine doesn't do this (Lynx Version 2.8.5dev.12).

I know of no browser which displays

 

as anything other than a space, unless you've got some kind of character encoding problem (and even that shouldn't make a difference).

[datadame]

another reason - some browsers will display &nbsp; all over your pages.

...Yikes?... What browsers, other than possibly some Lynx, display the code rather than rendering it? Or are you saying that you've seen Lynx do this just with &nbsp; used as a spacer, but not with other commands?

If you're working with a site that doesn't use CSS, what about simple <br> or <p> tags to insert blanks lines between paragraphs of text? Not especially elegant, but might do the job, depending on how much space you want.

[Reid]

I ran into this problem a few years ago.
I did some checking - old Lynx v2 or earlier could do it. &nbsp; was introduced later.
Some sites recommend using #160; instead which is the hex equivalent.
I don't think we need to take backward compatibility that seriously. If someone is having problems rendering &nbsp; then they need an upgrade.
Try doing a google search for &nbsp; boy if your browser can't handle this you got some real problems.
sorry for the mixup guys.

[ronin]

If you want to increase the gap between one paragraph and the next, you could use <p>&nbsp;</p>... but then again you could use

<ul><li>&nbsp;</li><li>&nbsp;</li></ul>

or you could use

<blockquote>&nbsp;</blockquote>

or even

<table><tr><td>&nbsp;</td></tr></table>...

(or dare I say it, you could even use a transparent gif!).

But seriously. Your document does not contain a paragraph which consists of a silent exclamation, nor a list which consists of nameless items nor a blockquote where somebody pauses for breath.

You just need to increase the gap between one paragraph and the next. So

p {margin: 2em 0}

or something similar ought to do the job nicely.