Question

I am having problems with my sidebar_box, as it is displaying a unwanted white space at the bottom of my images.

The thing is that this seems to happen only when I place an image inside (this doesn’t happen with text or ul lists)

You can see this jsFiddle

My HTML structure:

<div id="sidebar">
    <div class="sidebar_box">
        <div class="sidebar_header">Advertisement</div>
        <img src="./images/square_add.png" width="180" height="150" />
    </div>
</div>

The relevant CSS to reproduce:

*{
    padding:0;
    margin:0;
}

img{
    border:0;
}

#sidebar .sidebar_box{
    width:180px;
    background:#fff;
    border:1px solid #000;
}

#sidebar .sidebar_header{
    width:180px;
    background:#ddd;
    border-bottom:1px solid #000;
}

I am clueless and I have already tried everything of my knowledge.

Answer 1

Add vertical-align: bottom to your image. This happens because images are displayed inline, meaning they have to leave space below in case of q, p or other letters that drop below the baseline.