Why does fractional pixel padding give the parent element additional width?

Question

This is best explained through my JSFiddle. I'm using Chrome.

I have an inline-block container element. Inside of it are inline elements (spans).

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

When I give the star class padding of 5px, the border of the container renders as expected, at the edge of the last element.

When I change the padding to 5.5, or one of many other decimal values, the container appears to have additional width on one side (the more inner elements, the more profound this effect is).

Actually, I suspect that the container doesn't have extra width, but that the inner elements have too little width. Notice how the blue box displayed by Chrome's element inspector is narrower that in should be in the first example.

When the element is inline:

when the element is inline-block:

What's going on here?

Unless one of Google Chrome's engineers happens by your question (which you should have tagged Chrome, btw), I doubt you'll be able to get anything else than guesses around the general idea that *"using fractional pixels is not recommended"*. Really, guys? What the heck do you think `vw` translates into? I'll tell you. ***Fractional pixels. 99% of the time.*** Getting back to the question itself, you're better off asking it on Crhom[e/ium] forums than here, if you're actually interested in a proper, technical answer. However, I do hope I'm wrong and it will get a proper answer here. — tao, Mar 28 '17 at 19:22

score 2 · Answer 1 · edited Mar 28 '17 at 20:04

Ok, let's try to get to a reasonable conclusion.

Using fractional pixels is not wrong, but it doesn't work quite exactly as we would expect, since most browsers will round up the fractional number to an integer one.

I wish I could give you an official reference regarding this matter, but I can't. It is not a standard, it's just the way some browsers decided to render it. (if someone can find a reference, please feel free to update the answer)

Now, with that information in mind:

It's just a matter of math: (This measures are calculated in Google Chrome)

Without padding, your star character has a width of 13.33px. And you are adding a surrounding padding of 5.5px. So:

     FIRST STAR            SECOND STAR
--------------------   -------------------
  5.5 | 13.33 | 5.5     5.5 | 13.33 | 5.5
--------------------   -------------------

Summing up: 5.5 + 13.33 + 5.5 + 5.5 + 13.33 + 5.5 = 48.66

So the parent element is told by the browser that it's inner contents sum up to 48.66px, but based on what we have considered, it will render as 49px.

If that's true, then a 49px element should be exactly the same size of your example, as it is:

#container { 
  display: inline-block;
  border: dashed 1px red;
}

#compare {
  border: dashed 1px blue;
  width: 49px;
  text-align: center;
  margin-bottom: 10px;
}

.star {
  padding: 5.5px;
  background-color: lightgray;
}

<div id="compare">49px</div>

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

Conclusion:

You may ask, why isn't the inner content also rounded up to a total of 49px?

Apparently, the browser will round up or down depending of the fractional, so 13.33px will round to 13px on the inner elements, causing it to render smaller than its parent.

First, at some values the space looks like it's more than `1px`. Maybe render errors add up? Might be an optical illusion, but I doubt it. I don't have proper tools on this machine but I'll measure it. Secondly, why does Chrome have this *"error"* only for `inline` content, and not for `inline-block` content? Third, no matter how you play with the decimals, the box is never rounded down. It's never smaller. If what you say is true, it would sometimes be smaller than the stars by less than half a pixel. — tao, Mar 28 '17 at 23:35
Inspecting your example in Chrome, each star has `24.34px` (according to Chrome Tools tooltip). The `#container` is `52.69px`, according to the same tooltip. We're talking `4.01px`. — tao, Mar 28 '17 at 23:45
My Chrome is showing `23.33` for each star's width (https://image.ibb.co/nctjFa/Sem_t_tulo.png). When it should actually be `24.3` as you said, since `13.3 + 5.5 + 5.5 = 24.3`. That means Chrome is calculating 5.5 as 5px. — LcSalazar, Mar 29 '17 at 13:13

score 1 · Answer 2 · edited May 23 '17 at 12:17

1

Fractional pixels are allowed, you can refer to this answer: Can a CSS pixel be a fraction?

However, it depends on the browser how it interprets it. If you open your fiddle in IE11 the width is correct (funny IE11 being 'better' at something).

edited May 23 '17 at 12:17

Community

1
1

answered Mar 28 '17 at 19:08

Martina

739
3
13

Edge 38.19 renders it ok as well. Weird. – Miro Mar 28 '17 at 19:29

Iván Rodríguez Torres · Answer 3 · 2017-03-28T19:42:37.787

0

A quick test on safari show us that they are fit. Look:

The best way to fight with this is adding the border to the star. Take a look here:

#container { 
  display: inline-block;
  border: dashed 1px red;
}

#container2 { 
  display: inline-block;
}
.star {
  /* This creates extra width. */
  padding: 5.5px;
  background-color: lightgray;
}

.star2 {  
  /* This is fine. */
  padding: 5px;
  background-color: lightgray;
}

.star3 {  
  /* This is fine. */
  padding: 5.5px;
  border-top: dashed 1px red;
  border-bottom: dashed 1px red;
  background-color: lightgray;
}
.star3:first-child {  
  border-left: dashed 1px red;
}

.star3:last-child {  
  border-right: dashed 1px red;
}

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

<div id="container">
  <span class="star2">★</span><span class="star2">★</span>
</div>

<div id="container2">
  <span class="star3">★</span><span class="star3">★</span><span class="star3">★</span>
</div>

edited Mar 28 '17 at 19:42

answered Mar 28 '17 at 18:53

Iván Rodríguez Torres

4,293
3
31
47

1

The question is pretty clear. He doesn't ask if it's good practice. He didn't even say he's using it. OP asked "what's going on?" With all due respect, your answer does not answer the question. – tao Mar 28 '17 at 18:58
I think that it solve the "what is going on question". As the problem is the decimal pixel rendering @AndreiGheorghiu – Iván Rodríguez Torres Mar 28 '17 at 19:17
1

I have some context on this question, and it originally manifested on an element that was sized in em's. Since em's will almost always compute to fractional pixels, and are a widely used unit, saying "don't do that" doesn't really help understand the nature of the problem. – Richard Lindsey Mar 28 '17 at 19:30

score -2 · Answer 4 · answered Mar 28 '17 at 19:01

#container {
  display: inline-block;
  border: dashed 1px red;
}

.star {
  /* This creates extra width. */
  /*  padding: 4.48px 6.72px; */
  /* This is fine. */
  /*  padding: 5px; */
  /* This creates extra width. */
  padding: 5.5px;
  display: inline-block;
  background-color: lightgray;
}

<div id="container">
  <span class="star">★</span><span class="star">★</span>
</div>

#container {
  display: inline-block;
  border: dashed 1px red;
}

.star {
  /* This creates extra width. */
  /*  padding: 4.48px 6.72px; */
  /* This is fine. */
  /*  padding: 5px; */
  /* This creates extra width. */
  padding: 5.5px;
  display: inline-block;
  background-color: lightgray;
}

If you read the question closely, the OP already knows `inline-block` fixes the problem. He asked ***what's going on?***. Could you please try to answer the question? This is a theoretical question, not a practical one. — tao, Mar 28 '17 at 19:04

Why does fractional pixel padding give the parent element additional width?

4 Answers4