Question 44843 in Html Question posted in
Some basic documentation can be found here.

Why are the widths of these HTML elements uneven?

I created some div elements and gave them the same width of 5px.

This is my CSS code:

div {
  background-color: black;
  width: 5px;
  height: 100px;
  display: inline-block;
}

I was expecting all the divs to look the same, but some of them are 1px larger. Can anybody explain me why?

You can see the result here.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Initially I was also confused by the margin between the elements, I was not sure why it was there. I think the answer here is that is not the margin, but the whitespace between the divs rendered.

    The width of the whitespace must not be a multiple of 1px, so there is some rounding that causes some whitespaces and some divs to be rendered 1px larger or smaller.


  2. 0

    They are all 5px, no element has a width of 6px in the codepen you provided:
    Codepen screenshot

    Login or Signup to reply.
  3. 0

    Maybe is due browsers round off pixel values since browsers use whole numbers for pixel values. It may cause such errors sometimes. Maybe try using flex or grid
    or you can try adjusting the width of your elements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search