Below is some simple HTML code consisting of a div and a span:
<div id="container">Some text to affect the width</div>
<span>A</span>
I am currently using Eric Meyer's CSS Reset, which sets the line-height of the body to 1 and applies font: inherit; to every element.
Additionally, I have added styles for the HTML elements mentioned above like so:
body{background:#912FFF}
#container{background-color:#EDC1C1; width:150px;}
span{background-color:#35D9C4;}
To view the code in action, please check out this Fiddle link: http://jsfiddle.net/probosckie/5pb4794u/
The issue I am facing is that the span element overlaps with the div. This becomes more evident when zooming into the page.
My suspicion is that the line-height set to 1 and the font set to inherit are causing this problem. Can someone confirm if this is the case?