Paragraphs spacing not working

[cobber]

When attempting to use the editor and add space between two paragraphs (or any two elements) the spacing is not implemented in the website page.

eg:

Heading one (header tag H1)

Paragraph

if I use the enter key to create vertical space between the two then it's not implemented in the website once the page is saved. Yes the p tags are present but they are empty (obviously) and have not height value that would be used as a separator.

Maybe I'm missing something. Not come across this before in any other cms

[Edi]

When attempting to use the editor and add space between two paragraphs (or any two elements) the spacing is not implemented in the website page.

There is no HTML element for spaces between elements. Spaces between elements are set with CSS (margin and padding).

Yes the p tags are present but they are empty (obviously) and have not height value that would be used as a separator.

This is the right behaviour:

https://stackoverflow.com/questions/148 ... tor-or-not

[cobber]

Hi Edi,

Thanks for the reply. Apologies, maybe my explanation of the issue was incorrect.

I wanted to know why entering a new line in the TinyMce doesn't translate to a newline within the website. I've used many cms over the years, (GetSimple, Concrete5, Umbracco, sitecore etc) and all have the functionality of allowing the user to add new lines (thus controlling the spacing).

I've tested in several themes from Bludit and the behaviour remains the same.

Bludit is a nice cms and I'd like to use it as my goto cms for several projects.

Many thanks

[Edi]

I wanted to know why entering a new line in the TinyMce doesn't translate to a newline within the website.

Because there is no such thing like new line in HTML.

But you can use line breaks ("Enter" + "Shift"):

https://www.w3schools.com/tags/tag_br.asp

Line breaks allow to add "space" between lines in a paragraph:

Code: Select all

<p>First line<br>
second line<br>
<br>
third line</p>

[cobber]

Ok so I have a work around that may help others.

I just use the :empty selector on the p tag and add a padding-bottom of whatever I need.

eg:

Code: Select all

p:empty{
	padding-bottom:2rem;
}

[Edi]

You can do it like this. But I would not recommend it because it does not follow the semantic structure of HTML.

[cobber]

Interesting point

I wouldn't have thought there was a semantic issue as the content is still empty, the tag is still a p tag and the structure and flow of the document remains the same.

unless the screen readers pick up an issue ( which may be possible)

Update: Turns out I had a rogue bit of css that was messing up the content section of the cms.

Thanks Edi for your input. Your comments made me re evaluate my css and notice the glitch.