Create a space between some paragraphs

[Elle518]

Hi everyone! I'm trying to figure it out how is the best/correct way to create spaces between some paragraphs.
I have different choices to make:

1st. Between .space { margin-top:2.5 em; }/.space { padding-top:2.5em; }

2nd. Between

<p>Text</p>
<p class="space">Text</p>

or

<p>Text</p>
<p class="space"></p>
<p>Text</p>

With this one I have the doubt if it's correct to leave code without any text between the tags.

or

<p>Text</p>
<p class="space">&nbsp;</p>
<p>Text</p>

Please, could you show me the best way to do it?
A lot of thanks!!!

[Toxaris]

Depends. I use your first and you last solution. The middle one can be ignored by a reader. If it is a section break, I tend to use the last option. If it is for something else, I would probably use the first one.

Also, with your last option, you don't need the style 'space'. You just get an empty line.

[Keroberos]

I always use something like this,

.space{margin-top:2,5em;}

<p>Text</p>
<p class="space">More Text</p>

Unless it's a section break, then I use a small centered image with top and bottom margins because with reflowable text if the section break happens on a page break it is difficult to tell if it's a section break.

[mmat1]

Originally Posted by Elle518

1st. Between .space { margin-top:2.5 em; }/.space { padding-top:2.5em; }

In a "common" paragraph, there isn't a visible difference between margin and padding. Both is valid.
If you use a border around the paragraph or some background-color, then there is a big difference.

[uieluck]

If you're working in InDesign, you can make a style that has space below or above to provide white space between paragraphs.

[Tennyoelf]

For some reason I use this -

p.breakinp
{
text-indent:20px;
margin-top:0;
margin-left: 0;
margin-right:0;
font-family:"Times New Roman", Times, serif;
font-size:12px;
margin-bottom: 2em;
}

- for my paragraphs that need space between them. However Kobo Vox (the native reader) does not read it. I have no idea why. I'm kind of lost because those spaces are really needed. None of my CSS margins are being read. Every other device reads it, just not the Kobo reader or the Kobo Vox or the other android reader. Is my CSS too primitive? Or is my code funky? I use both Sigil and Calibre.

[pholy]

Slightly off-topic... Do you really want a font size of 12 PIXELS? That's pretty tiny on a 167 dpi screen like the Kobo. And I always do my text-indent in ems... I don't know if checking on an old Kobo would help you.

[JSWolf]

Originally Posted by Tennyoelf

For some reason I use this -

p.breakinp
{
text-indent:20px;
margin-top:0;
margin-left: 0;
margin-right:0;
font-family:"Times New Roman", Times, serif;
font-size:12px;
margin-bottom: 2em;
}

- for my paragraphs that need space between them. However Kobo Vox (the native reader) does not read it. I have no idea why. I'm kind of lost because those spaces are really needed. None of my CSS margins are being read. Every other device reads it, just not the Kobo reader or the Kobo Vox or the other android reader. Is my CSS too primitive? Or is my code funky? I use both Sigil and Calibre.

Not very good code overall...

Here is the same code fixed up....

.breakinp {
  text-indent: 0;
  margin-top: 30px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0
}

That's all you need. It does work with ADE. The code to use it would be...

<p class="breakinp">Your paragraph here.</p>

[yekim54]

Originally Posted by JSWolf

Not very good code overall...

Here is the same code fixed up....

.breakinp {
  text-indent: 0
  margin-top: 30px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0
}

That's all you need. It does work with ADE.

Did you test it with ADE? It's missing a ";" after "text-indent: 0".

[pholy]

I'm still not comfortable with using pixels for any measurement in an epub. The dpi for various screens goes from 100 (or less) for some lcd screens usp to 200 for a 5 inch E-Ink screen, and maybe more for a Retina display. The visual effect will be quite unpleasant.

And I would use margin: 0.5em, 0, 0; or margin 0.5em, 0, 0, 0; remembering that margins start aat the top and go around clockwise. A two valued margin doesn't do waht you want, and I always forget that it is the side margins that are duplicated with the three valued margin.

@yekim54 - You know he didn't try exactly what he typed with ADE ADE would have thrown out his whole style sheet for that missing semicolon

[JSWolf]

Originally Posted by yekim54

Did you test it with ADE? It's missing a ";" after "text-indent: 0".

OOPPSS!

It was a typo. It's been fixed.

[JSWolf]

For those that like ems instead of my 30px, here is the code....

.breakinp {
  text-indent: 0;
  margin-top: 2em;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0
}

[mmat1]

Originally Posted by pholy

And I would use margin: 0.5em, 0, 0; or margin 0.5em, 0, 0, 0;

with kommas between the values ?

[Tennyoelf]

Originally Posted by JSWolf

Not very good code overall...

Here is the same code fixed up....

.breakinp {
  text-indent: 0;
  margin-top: 30px;
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0
}

That's all you need. It does work with ADE. The code to use it would be...

<p class="breakinp">Your paragraph here.</p>

I'm just getting back into coding after years away, so I figured my code was messy. Thanks for the input. I do need indents for the paragraph though, would that be a class element for the body?

And I'm curious why you picked margins at the top instead of the bottom, is there a reason for that?

Thanks again!

[theducks]

Originally Posted by Tennyoelf

I'm just getting back into coding after years away, so I figured my code was messy. Thanks for the input. I do need indents for the paragraph though, would that be a class element for the body?

And I'm curious why you picked margins at the top instead of the bottom, is there a reason for that?

Thanks again!

I have been using balanced top/bottom margins for <P> tags

No bottom means that the last line ends at the Hard Bottom (without any bottom white space. That might just make a difference on some pages.