CODEWITHSUNDEEP
htmlcss
Seth Urquhart
Seth Urquhart

Reputation: 599

White spacing between images that shouldn't be there

I'm just messing around with basic HTML and CSS and ran into this problem. I have two images directly on top of each other that appear from the top of the screen and down. I don't understand why there is a white line seperating the two images. I think it's connected to the first image because the second image has the same spacing but smaller, if you highlite the image.

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Christdentity</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript"></script>
    </head>
    <body>
        <img class="logo-banner" src="images/christd_logo_banner.jpg">
        <img class="logo-banner-dark" src="images/christd_logo_banner2.jpg">
    </body>
</html>

CSS:

body {
    margin: 0;
}

img.logo-banner {
    width: 100%;
    min-width: 600px;
    height: 40px; 
    padding-bottom: 0; 
}

img.logo-banner-dark {
    width: 100%;
    min-width: 600px;
    height: 20px;
    padding-bottom: 0;
}

jsfiddle: http://jsfiddle.net/Sederu/nQe7F/

Upvotes: 0

Views: 129

Answers (1)

Adrift
Adrift

Reputation: 59779

Add display: block; to the <img> as they're replaced inline elements by default 

img.logo-banner {
display: block;
width: 100%;
min-width: 600px;
height: 40px; 
padding-bottom: 0; 
}

img.logo-banner-dark {
display: block;
width: 100%;
min-width: 600px;
height: 20px;
padding-bottom: 0;
}

http://jsfiddle.net/nQe7F/2/

Also take a look at: Eliminate vertical whitespace between images

Upvotes: 4

Related Questions