CODEWITHSUNDEEP
css
Boris Parnikel
Boris Parnikel

Reputation: 863

BR tag height in HTML with text

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>

Upvotes: 1

Views: 1933

Answers (1)

C3roe
C3roe

Reputation: 96306

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.

Upvotes: 1

Related Questions