Phantom pixels on parent container in css

Question

If you inspect the icon height it's 16px, but for some reason the parent container is 18px.

I've been playing with the css trying to figure why this happens, no luck. Probably something stupid.

PD: No hacks... I know I can force the height on the container, but I don't want to. I just want to understand what's generating the extra pixels.

.container {
  background-color: green;
}
i {
  background-color: pink;
  display:inline-block;
  margin:0;
  padding:0;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="container">
  <i class="fas fa-angry"></i>
</div>

I have also checked this question: Image inside div has extra space below the image but it doesn't seems to fix the issue when adjusting vertical-align (the display:block fixes the issue but I don't want to make the icon a block element since it need to go with text)

.container {
  background-color: green;
}
i {
  background-color: pink;
  display:inline-block;
  margin:0;
  padding:0;
  vertical-align:top;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="container">
  <i class="fas fa-angry"></i>
</div>

Robert Corponoi · Answer 1 · 2018-10-06T13:16:14.163

2

To fix your problem took me two steps.

First, the browser has its own styles which it applies to your content and some of them might give you trouble. In your case, the default line-height property on your container is adding extra space so setting it to 1 fixed that.

Second, even after applying the line height reset, there was still a 1px gap so I did some research and according to this answer about Inline Replaced Elements, due to some behavior of elements, you might have to adjust the vertical-align property also.

In your case, applying the vertical-align property on the i element gets rid of the 1 extra pixel. The vertical-align property can be set to top or bottom and it will behave the same.

.container {
  background-color: green;
  line-height: 1;
}

i {
  background-color: pink;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="container">
  <i class="fas fa-angry"></i>
</div>

edited Oct 06 '18 at 13:16

answered Oct 06 '18 at 02:33

Robert Corponoi

387
3
11

reseting the line-height is a *very* bad idea .... once you start writing text you will see the issue, the alignment is enough – Temani Afif Oct 06 '18 at 09:42
@TemaniAfif It's used in [Eric Meyer's CSS Reset](https://meyerweb.com/eric/tools/css/reset/) which is arguably the most popular CSS reset. – Robert Corponoi Oct 06 '18 at 13:07
check this : https://jsfiddle.net/xmhqe94r/2/ you will clearly notice the difference and how the space between text is narrowed in the second block... so even if it's used with the Eric Meyer CSS reset, it's not a good idea. And it's not need in your case, the alignment is enough – Temani Afif Oct 06 '18 at 13:16
While I agree that its not always great to reset, and I edited my answer so that only the container's line height is rest, I couldn't get the extra space to go away without it. If you copy my snippet and take out the line-height part, there is 1px still in between the icon and the container. – Robert Corponoi Oct 06 '18 at 13:18
1

hmm, it's strange, the alignment should be enough .. need to check this, seems there is a particular behavior with font awesome as with image or inline-block element it's not the same and we don't need line-height – Temani Afif Oct 06 '18 at 13:38
I agree it's strange behavior and if you happen to find it before I get a chance to and the question doesn't get removed as a duplicate I'll be more than happy to amend my answer or delete it if you write your own. – Robert Corponoi Oct 06 '18 at 14:18
I'm sure it is not a Font Awesome only issue, I used font awesome for simplicity in the example, but in reality I have my own custom font. I believe it's a bug behavior in font rendering for @font-face. – Luis Rivera Oct 08 '18 at 07:45

Phantom pixels on parent container in css

1 Answers1