# \<br\> needs extra empty line

**URL:** https://meta.discourse.org/t/br-needs-extra-empty-line/342046
**Category:** Feature
**Created:** [December 12, 2024, 12:16pm UTC](https://meta.discourse.org/t/br-needs-extra-empty-line/342046 "2024-12-12T12:16:32Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 12, 2024, 12:16pm UTC](https://meta.discourse.org/t/br-needs-extra-empty-line/342046/1 "2024-12-12T12:16:32Z")

</div>

This doesn’t work

```plaintext
<br>
<kbd>[wrap=icon id=fa-share][/wrap]&nbsp;Reply</kbd>

```

  
[wrap=icon id=fa-share][/wrap]&nbsp;Reply

But this works:

```plaintext
<br>

<kbd>[wrap=icon id=fa-share][/wrap]&nbsp;Reply</kbd>

```

  

&nbsp;Reply

This can be a UX/UI-question too, but because it worked earlier, I count it as a bug.

Not a biggie, though. But it can affect every situation when a HTML-tag is used. In my forum it broke almost every helps where an example-button is used or I’ve needed extra space after an image.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [December 12, 2024, 12:29pm UTC](https://meta.discourse.org/t/br-needs-extra-empty-line/342046/2 "2024-12-12T12:29:21Z")

</div>

I also had that problem yesterday at [User Card Directory: message button should not show on mobile - #5 by Moin](https://meta.discourse.org/t/user-card-directory-message-button-should-not-show-on-mobile/311878/5). I wasn’t able to figure out why the link did not work:

> [@User Card Directory: message button should not show on mobile](https://meta.discourse.org/t/user-card-directory-message-button-should-not-show-on-mobile/311878/5):
>
> There is no message or chat button. It’s hidden by the component’s css:  
> [discourse-user-card-directory/common/common.scss at main · discourse/discourse-user-card-directory · GitHub](https://github.com/discourse/discourse-user-card-directory/blob/main/common/common.scss#L57-L59)
> 
>   
> But in mobile view, those are shown [open this in a new tab for mobile view](https://meta.discourse.org/u?cards=yes&order=likes\_received&mobile\_view=1)

So, in the end, I removed the `<br>`. And now I was able to add it again because you told me that all I needed to fix it was an empty line. Thanks.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [December 13, 2024, 4:04am UTC](https://meta.discourse.org/t/br-needs-extra-empty-line/342046/3 "2024-12-13T04:04:34Z")

</div>

This is not really a bug, it is just commonmark spec which makes mixing html and markdown somewhat quirky.

When you do `<br>` it thinks it is a multi line html element, so certain rules do not kick in.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [December 13, 2024, 4:22am UTC](https://meta.discourse.org/t/br-needs-extra-empty-line/342046/4 "2024-12-13T04:22:30Z")

</div>

this works:

```plaintext
\
<kbd>[wrap=icon id=fa-share][/wrap]&nbsp;Reply</kbd>

```

&nbsp;Reply

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 13, 2024, 8:28am UTC](https://meta.discourse.org/t/br-needs-extra-empty-line/342046/5 "2024-12-13T08:28:48Z")

</div>

> [@sam](#):
>
> so certain rules do not kick in

Before kicked in, so those certain rules are only few days old 🤷‍♂️

No can do then and I have to start fix posts manually.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 13, 2024, 9:11am UTC](https://meta.discourse.org/t/br-needs-extra-empty-line/342046/6 "2024-12-13T09:11:48Z")

</div>

I still claim there is something more, because that quirky thing stops totally `<br>`.

```plaintext
<br>
<kbd>[wrap=icon id=fa-share][/wrap]&nbsp;Vastaa</kbd>

<br />
<kbd>[wrap=icon id=fa-share][/wrap]&nbsp;Vastaa</kbd>

<kbd>[wrap=icon id=fa-share][/wrap]&nbsp;Vastaa</kbd>

```

  
[wrap=icon id=fa-share][/wrap]&nbsp;Vastaa  
[wrap=icon id=fa-share][/wrap]&nbsp;Vastaa

&nbsp;Vastaa