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

1 Answer 1

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.