Code Blank Line Between Paragraphs

blank line white space

[Jennnnn]

What is the correct way to code two blank lines of space between two different paragraphs?

I use &nbsp; for one blank line. Is <br> preferable? I use html5. Thanks!

[lucy24]

In a word: CSS.

Sure, there are situations where it's easiest to pop in a quick
<p>&nbsp;</p>
but only for one-offs, not as a matter of routine.

[NickMNS]

<p>some text</p>
<p>some more text</p>
Should normally provide sufficient space between paragraphs. If you are not using <p> tags then, as lucy24 suggests CSS, You can use css to style the tag or class. Something like:

.myClass{
  margin:1em auto;
}

This will set the top and bottom margin of the element to the equivalent of the height of the font-size.

[lucy24]

margin: 1em auto;

. . . which just happens to be the default for a paragraph in all browsers since forever. But it only comes out to the equivalent of one blank line if you also stick with the default line-height of 1em, which is frankly unreadable. I normally use 1.2. (Line-height is one of the rare situations where you don't need to specify a unit for non-zero values; it assumes em if you don't say. Or maybe here it’s considered a multiplier, equivalent to 120%?)

[keyplyr]

Hi Jennnnn,

You can style the paragraph tag itself to display spacing in your CSS file:

p {
 margin-bottom: 25px;
}

Or inline...

<p style="margin-bottom: 25px;">Content here</p>

Or if you only want to use this spacing on some paragraphs but not others, use this in your CSS file:

p.ex1 {
 margin-bottom: 25px;
}

Then in the markup, tag the paragraph like this:

<p class="ex1">Content here</p>

[tangor]

How often? Is it consistent? Is it really necessary? Only you can answer those questions while others might wonder why. :)

Have two different p in your css, as noted above. Your notation should make it obvious years from now ... we all sleep and sometimes forget what we intended those years ago. :)

<p class="dblspc">content</p>

Personally prefer ems, but px works as well.

[Jennnnn]

I want to use this in my sidebar sections which consist of short paragraphs of information (most having their own H4 title) on related but slightly different topics. I’ve also have an occasional free shipping image and other similar information. The sections move around/ change/ are modified occasionally as I update content. I try to space out the information depending on the length of information in the body of each page. I think its easier to read when there are two blank lines between paragraphs and is more visually appealing alongside the material in the body. That’s why I wanted to code two blank lines. Thanks for your help!

[lucy24]

div.sidebar p {margin-top: 1.5em;}

[keyplyr]

div.sidebar p {margin-bottom: 1.5em;}

[tangor]

If the display is

h?
p content
h?
p content
p content

Then style the h? for the margins and leave the p alone

[lucy24]

margin-bottom: 1.5em;

I style almost everything with a bottom margin of 0 because that way I can make
something + something {margin-top: blahblah;}
rules. In current CSS, you can only style the second member in an a + b sequence.

[keyplyr]

In current CSS, you can only style the second member in an a + b sequence.

I do it all the time.

<p style="margin-bottom: 25px;">Content here</p>
<p style="margin-bottom: 25px;">Content here</p>
<p>Content here</p>

Or maybe I'm not understanding what you mean.

[lucy24]

I mean, ahem, WITHOUT resorting either to inline styles or a classname. The
foo + bar
locution in and of itself means “apply these styles to bar whenever it comes immediately after foo”. In the specific case of top/bottom margins, obviously it doesn't matter when you're increasing the margin--but it's no use saying “margin-top: .25em" when the preceding element has a bottom margin of 1.5em.

[tangor]

I just like to keep body text the same no matter what. Any margins applied in that flow are at the header or div level. Different strokes for different folks and all that. :)

hr remains functional as a divider. I have two of those, one full width, the other 50% centered and two versions of each--regular and a second with plus 1em top and bottom for extra separation and visual appeal. (Rule/underscore or Divider)

Inline styling is something I avoid like the plague! Has to be a very special one-off for me to do that.