# Overlapping "5 Likes" and heart icon buttons

**URL:** <https://meta.discourse.org/t/overlapping-5-likes-and-heart-icon-buttons/34246>\
**Category:** UX\
**Created:** [October 8, 2015, 3:08am UTC](https://meta.discourse.org/t/overlapping-5-likes-and-heart-icon-buttons/34246 "2015-10-08T03:08:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)\
**Post date:** [October 8, 2015, 3:08am UTC](https://meta.discourse.org/t/overlapping-5-likes-and-heart-icon-buttons/34246/1 "2015-10-08T03:08:36Z")

</div>

When I clicked on the heart to like it, this weird overlap went away.

 ![](https://global.discourse-cdn.com/meta/original/3X/f/b/fb53a8a125afab83e56a66480b07bbf58b47f46e.png)

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [October 8, 2015, 11:33am UTC](https://meta.discourse.org/t/overlapping-5-likes-and-heart-icon-buttons/34246/2 "2015-10-08T11:33:30Z")

</div>

Okay, seems to be a simple fix. It is due to the `margin-right: -5px`, removing that seems to resolve the issue.

PR Submitted  
[https://github.com/discourse/discourse/pull/3842](https://github.com/discourse/discourse/pull/3842)

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [October 8, 2015, 11:50am UTC](https://meta.discourse.org/t/overlapping-5-likes-and-heart-icon-buttons/34246/3 "2015-10-08T11:50:18Z")

</div>

Pretty sure that is there intentionally otherwise likes is too far from the heart with “default” button spacing. Might be another way to express it in CSS.

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [October 8, 2015, 12:00pm UTC](https://meta.discourse.org/t/overlapping-5-likes-and-heart-icon-buttons/34246/4 "2015-10-08T12:00:50Z")

</div>

Here are screenshots of the differences

With negative right margin

 ![](https://global.discourse-cdn.com/meta/original/3X/7/2/72c395c9e19d3930b11f61fc874b0907f0d905a3.png)

Without negative right margin

 ![](https://global.discourse-cdn.com/meta/original/3X/a/e/ae27ced59a1a6d3f5a37fe3ba29eaaed71854117.png)

It is pretty negligible, and the description of Likes next to the number signifies its relation.

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [October 8, 2015, 12:01pm UTC](https://meta.discourse.org/t/overlapping-5-likes-and-heart-icon-buttons/34246/5 "2015-10-08T12:01:45Z")

</div>

Yeah the negative margin is intentional. But it could possibly be expressed as a margin override instead, etc.