I'm styling a div object so that its content behaves like a normal text.

As first thing I set its line height as the default line-height of a line in a paragraph.

I got this by adding the following css code

.myclass div {
    margin: -1.43em 0 -0.93em 0;
}

In this way, by writing this in the WP editor

badp
<div class=myclass>badp</div>
badp

the vertical spacing is changed as shown in the image

---

Next I'd like that an empty line after the div in the editor will correspond to a blank line in the webpage. That is, I'd like that by writing

badp
<div class=myclass>badp</div>

badp

the vertical spacing will be changed as shown in the image

I know that this can be obtained by inserting   in the empty line, but is it possibile to achieve it by simply leaving an empty line as we usually do for normal text?

I'm styling a div object so that its content behaves like a normal text.

As first thing I set its line height as the default line-height of a line in a paragraph.

I got this by adding the following css code

.myclass div {
    margin: -1.43em 0 -0.93em 0;
}

In this way, by writing this in the WP editor

badp
<div class=myclass>badp</div>
badp

the vertical spacing is changed as shown in the image

---

Next I'd like that an empty line after the div in the editor will correspond to a blank line in the webpage. That is, I'd like that by writing

badp
<div class=myclass>badp</div>

badp

the vertical spacing will be changed as shown in the image

I know that this can be obtained by inserting   in the empty line, but is it possibile to achieve it by simply leaving an empty line as we usually do for normal text?

• css
• html

Share Improve this question asked Sep 12, 2019 at 16:17 sound wavesound wave 21511 gold badge33 silver badges1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

A solution is to create a new class, say extra-space, with css margin-bottom: 0.5em and write

<div class="myclass extra-space">...text...</div>

when the div need more space.

Important: the class extra-space has to be placed AFTER the other class in the style.css file, otherwise the extra space will not be added.