Menu
Can anyone point out to me why there's a line (of background color, red in this case) below the image and above the navigation bar? Both Firefox and Chrome display the red line, so I assume it is rendered as intended. But I can't seem to find the issue through the developer tools. The borders, paddings and margins are all 0, which is puzzling. Here's the stripped down version of the code, or jsfiddle.net/bvss4/9:
<body>
<div id="main-wrapper">
<header id="main-header">
<img id="title-image" src="http://i.imgur.com/JaYSY.jpg" />
<div id="main-navbar">
STUFF
</div>
</header>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#main-wrapper {
width: 90%;
margin: 0 auto;
border: 3px solid #888;
margin-top: 20px;
background: red;
}
#title-image {
width: 100%;
}
#main-navbar {
width: 100%;
background: #333333;
}
984
Adding a display:block to your #title-image will fix it
#title-image {
width: 100%;
display:block;
}
JSFiddle here
90
Set vertical-align: bottom on the image's CSS.
The reason it happens is because images are displayed inline with text. This means that they have to allow a small space below the line in case of letters like y, g etc that drop below the baseline and cause the space.
By setting the vertical-align to bottom, you move the image so that it's aligned with the bottom of the text, avoiding this problem.
There is one exception you should be aware of: If the image has less height than a single line of text, it will leave a gap above it to make room for that text, unless you set the containing element to have a line-height that works.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
