I admit, the title of this question may not be the most creative, but I've hit a wall in my search for answers. It seems like I must be missing something fundamental in CSS, or perhaps my search terms are just off.
Here's the issue: I have a container div with a 40x40px background-image positioned in the top left corner. My goal is to align the top of the text within an h2 tag with the top of that background-image. Here's what I've attempted:
HTML:
<div id="container">
<h2 id="title">Lorem</h2>
</div>
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#container {
background: url('test-icon.png') top left no-repeat;
margin: 200px auto; /* Center the container*/
min-height: 50px;
padding-left: 50px; /* Prevent text from overlapping with background-image*/
width: 300px;
}
#title {
font-family: "Arial Black", Arial, Helvetica, sans-serif;
font-size: 1.3em;
text-transform: uppercase;
}
I've used Eric Meyer's CSS reset to eliminate browser-specific styles, although it's not shown in the code above.
You can view a live example here.
The current problem is that the background-image and the top of the text in the h2-tag aren't aligning perfectly - there's a slight margin at the top of the h2 tag. This margin appears to vary with the font size. Even when Chrome's inspector indicates that both the h2 and div tags have zero margins and padding, the issue persists. Given the variations in how browsers render fonts, I'm hesitant to use negative margins for fear of disrupting the layout. Is there a safe way to eliminate this margin? Just to clarify, I'm aiming for a result similar to this.