0

http://codepen.io/anon/pen/LGdqyp

HTML:

<span>First</span>
<span>Second</span>

CSS:

body {
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

span {
  display: inline-block;
  width: 50%;
  margin: 0;
  border: 1px solid #000;
}

I have applied box-sizing, margin set to zero. The two elements are supposed to align next to each other. Why don't they?

Joshua Leung
  • 2,219
  • 7
  • 29
  • 52
  • This is a well known issue and I *think* is to do with part-pixel display resolutions on certain devices and at certain pixel densities, that this makes the browser round up 50%+50% + error = 101% . because a percentage is not an absolute figure so if the window size is 701px then 50% is 350.5 but half pixels are rounded up so it becomes 351px. *I think* – Martin Jan 27 '16 at 01:07
  • @Martin Some old browsers had this subpixel problem but now I think all major browsers fixed that (now they have other subpixel problems, because it's not possible to fix them all simultaneously, but current ones are more tolerable). But in this case the problem is that there is some space between the elements in the HTML source, and that space won't disappear magically. – Oriol Jan 27 '16 at 01:11

0 Answers0