Unable to get rid of spaces around an image using DIV

Hi,

I am trying to get rid of white space around an image using DIV…read through umpteen posts and tried all sorts - it simply does not work whatever I try…the red border still appears at the bottom of the image.

Any help would be greatfully received.

HTML Code is:

<!DOCTYPE html>
<html lang=“en”>
<head><title>Title</title><meta charset=“utf-8”/>

<link rel=“stylesheet” href=“css/6.css” type=“text/css” media=“screen”/>

</head>

<div id=“first_logo_container”><img src=“images/Klogo1.jpg” /></div>

</body>
</html>

CSS code for 6.css is:

body {
}

#first_logo_container {
float:left;
background-color:red;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}

@Anuraggb;

Welcome to the forum.

Try adding line-height:0 to the CSS

or you could do this:

#first_logo_container img{ float: left; }

Hi Anuraggb. Welcome to the forums. :slight_smile:

This is a common issue, and you need to add this to your CSS to fix it:

img {vertical-align: bottom;}

An alternative is

img {display: block;}

but the issue is really caused by the default space that is put under images by the browser. This is because, by default, an image aligns with the baseline of any text that might sit beside it, so there is space below it for the descenders of the text.

Thank you everyone…the “line-height:0” has done the trick for me…I will also try all other suggestions to see how it works…much appreciated!