How can I put a slightly increased space between just two paragraphs?

[Bert Coules]

Is it possible to insert an extra space between two particular paragraphs equivalent to one and a half line heights? Like this (though this isn't to scale):

 

Paragraph one

(1 blank line)

Paragraph two

 

(1.5 blank lines)

 

Paragraph three

(1 blank line)

Paragraph four

 

I know about setting the paragraph spacing globally, but I need it to happen just once. I tried setting an increased height for a single paragraph, but that affects the spacing both before and after it.

 

Edited to add:

 

Someone elsewhere kindly advised me to apply a style to paragraph three:

<p style="margin-top: 1.5em;">

Which works a treat. It does feel slightly odd to be putting a formatting command in a php file rather the stylesheet, but I suppose for a single instance it really is far more sensible.

Edited November 24, 2014 by Bert Coules

[niche]

line-height

 

http://www.webmasterworld.com/forum83/100.htm

Edited November 24, 2014 by niche

[Ingolme]

Margin is the best way to put space between paragraphs. If you don't want to use a style attribute you can give a class name to it instead and put a class in your stylesheet with the margin on it.

[tejasamrute]

Pure HTML

 

<p style="margin-bottom:1em">Paragraph 1</p>

 

<p style="margin-bottom:1.5em">Paragraph 2</p>

 

<p style="margin-bottom:2em">Paragraph 3</p>

 

 

OR

 

HTML with CSS

 

 

.paramargin1 {

margin-bottom:1em;

}

 

.paramargin2 {

margin-bottom:1.5em;

}

 

 

<p class="paramargin1">Paragraph 1</p>

 

<p class="paramargin2>Paragraph 2</p>

 

<p class="paramargin1">Paragraph 3</p>

[Bert Coules]

Thanks for the replies. If I needed to apply that formatting in more than one instance I'd put it into the stylesheet, but for a one-off it seems more sensible to put it in the php file.

[tejasamrute]

You can also use

 

 

p {

margin-bottom:1em;

}

 

 

p:nth-child(2)

{

margin-bottom:1.5em;

}

 

 

<p>Paragraph 1</p>

 

<p>Paragraph 2</p>

 

<p>Paragraph 3</p>

 

 

PS - Check :nth-child browser compatibility

[Bert Coules]

Tezzo thanks, it's useful to have another alternative method.