1

I have an editable page and content, that consists of blocks of text and
tags as separators bwetween paragraphs. I want to make distance between paragraphs larger and I found solution with 

br {
    display:block;
    margin-top: 15px;
    content: " "
}

but in this case multiple br tags in row are collapsed. Also i found solution with line-height, but in this case cursor on empty line looks weird. I can't use p tag, so are there any other solutions?

body {
  display: flex;
}

.first {
  margin-right: 30px;
}

.first br {
  display: block;
  margin-top: 15px;
  content: " ";
}

.second br {
  display: block;
  margin-top: 15px;
  line-height: 50px;
}
<body contenteditable="true">
  
  <div class="first">
    <h3>display:block solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
  <div class="second">
    <h3>line-height solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
</body>
Community
  • 1
  • 1
Boris Parnikel
  • 863
  • 1
  • 7
  • 15

1 Answers1

1

but in this case multiple br tags in row are collapsed

Try adding a transparent border-top, to avoid the effect of collapsing margins.

body {
  display: flex;
}

.first {
  margin-right: 30px;
}

.first br {
  display: block;
  margin-top: 15px;
  border-top: 1px solid transparent;
  content: " ";
}

.second br {
  display: block;
  margin-top: 15px;
  line-height: 50px;
}
<body contenteditable="true">
  
  <div class="first">
    <h3>display:block solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
  <div class="second">
    <h3>line-height solution</h1>
    Lorem ipsum dolor sit amet
    <br>
    Lorem ipsum dolor sit amet
    <br>
    <br>
    Lorem ipsum dolor sit amet
  </div>
</body>

That achieves a double line height between the second and third line in the first example, at least on Chromium. Firefox seems not to have this problem in the first place, in that both of your example look the same. Have not tested Internet Explorer and Edge.

But this is a rather hack-y and error-prone solution. You say you “can’t” use proper paragraph elements - but you should be able to, otherwise your content editing system rather … well, sucks. This is not just a matter of “how it looks”, but also of semantics, and with that possibly search engine ranking, etc.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • Thank you. We use CKeditor and (I don't know why) historically **br** approach was choosen. Of course, with **p** it could be better... – Boris Parnikel Jan 26 '17 at 10:05
  • There is another porblem with your solution. Move caret to empty line before 3rd paragraph and start to type something. It appears at the end of second paragraph... – Boris Parnikel Jan 26 '17 at 10:08
  • Yeah, you would need to click, and then press cursor right once, and then start typing … Dunno if that can be fixed. That can happen when you try and find workarounds, instead of fixing the real problem (configuring CKeditor to produce proper paragraphs.) – CBroe Jan 26 '17 at 10:16