1

I came across a minor issue with flex-direction and the behavior of < br> in different Browsers. In Chrome I get a space between my < strong> element and the text while Firefox seems to fully ignore them. Wrapping the Lorem Ipsum in a < div> or < span> or adding multiple < br> won´t fix it. I also researched about the topic but can not find a solution on it.

Here is a very simply HTML + CSS:

.flex-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
<div class="flex-col">
  <strong>Hello World!</strong>
  <br/><br/><br/>
  <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
</div>

https://codepen.io/Mosl/pen/MWbOOba

Would be happy about tips. I tried various things (even shitfixes) like targeting the < br> directly and making it display block / giving it a height. Wrapping the text in a separated < div> / < span> or whatever.

Sure I can build it differently, but this is done over the CMS and not a static code. So variants like this could happen easily. And to be honest even if it was fixable on a different way, but would be nice to understand it anyway :)

Thanks in advance!

Ali Esmailpor
  • 1,209
  • 3
  • 11
  • 22
Marcel Schmid
  • 424
  • 2
  • 15
  • add a margin top to your div and remove the br – Temani Afif Feb 23 '21 at 19:26
  • should not be using `br` where spacing changes should suffice — `div {margin-top: 3em}` would work better. `br` may be interpreted by different browsers as a line return character rather than a block-level element. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br – franklylately Feb 23 '21 at 19:31
  • Wow guys. I like how you fully ignore my explanation. I am well aware that I can use margin instead. But the customer who is using the CMS will just press Enter to get a break. So your solution is not viable or helpfull at all. I can as said solve it differently but I seek to understand the reason of the behavior... – Marcel Schmid Feb 24 '21 at 12:23

1 Answers1

1

Using <br> to get spacing is not the best practice. You should achieve it by CSS.
Ref.: <br /> not working in Firefox

Edit: Seems like firefox does not supports br inside flex box.
You can also achieve spacing using a div tag and css.

<div class="empty-space"></div>

.flex-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
 
} 
.empty-space {
    height: 2em;
}
abhinav3414
  • 946
  • 3
  • 9
  • 31