Span element drifts to the right by (0.25 x font-height) pixels

Question

I'm looking for an explanation for the following behaviour.

I have a <div> container with three <span> elements. The first and third elements are cosmetic, their purpose is fill the width of the browser window with different background colours. This is achieved by adjusting the horizontal padding and margins of the elements.

There is an unwanted gap between the second and third <span> elements. I've determined that the width of the gap is exactly a quarter of the font size which was set for the parent <div> element.

My solution to the issue is to add a negative margin to the third <span> element. The following code snippet demonstrates the issue and also my solution to the problem.

http://codepen.io/danag/pen/RKZQxE

Can someone explain to me the reason for the behaviour?

I'd also be happy to learn of a better solution to this layout problem.

 body { margin : 0; padding: 0; overflow-x: hidden; } h2 { font-size: 32px; } .bg-blue { background-color: #1111ee; } .bg-red { background-color: #ee1111; } #my-container { background-color: #ffffff; } #my-content, #my-content-too { width: 80%; margin: auto; background-color: #ffffe0; padding: 1.5em; } .heading-wrapper { display: inline; font-size: 100px; line-height: 1.2; background-color: #ffff00; } .heading-wrapper .heading { display: inline; text-transform: uppercase; background-color: #eee; } .heading h2 { display: inline; padding-left: 0.3em; padding-right: 0.3em; } .extend-left { margin-left: -2000px; margin-right: 0; padding-left: 2000px; padding-right: 0; } .extend-right { margin-left: 0; margin-right: -2000px; padding-left: 0; padding-right: 2000px; } .left-25 { margin-left: -25px; } 

 <div id="my-container"> <div id="my-content"> <div class="heading-wrapper"> <span class="extend-left bg-blue"></span> <span class="heading"><h2>Heading Text</h2></span> <span class="extend-right bg-red"></span> </div> <div class="text-wrapper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div> </div> <div id="my-content-too"> <div class="heading-wrapper"> <span class="extend-left bg-blue"></span> <span class="heading"><h2>Heading Too</h2></span> <span class="extend-right bg-red left-25"></span> </div> <div class="text-wrapper"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p></div> </div> </div> 

Answer 1

You seem to have ran into the whitespace issue where any whitespace results in a space (   ) in that position. The best solution is either float (which causes numerous other issues) or setting the font-size to font the parent element and then setting it back to your value in the child.

.parent { font-size: 0; }
.parent > * { font-size: 1rem; }

Hope that helps.