CODEWITHSUNDEEP
htmlcssimageborder
soomro
soomro

Reputation: 171

Why is there a white border under this image in the div?

I do not know why, but there is a white border or space under my image in my div. I am trying to make a box where an image will fit perfectly, but this white space below it is making it looking really bad. How do I disable it?

HTML

<div class="content-img">
    <img src="">
</div>

<div class="content-box">
    <p>HELLO WORLD</p>
</div>

CSS

.content-box {
    background: white;
    border-radius: 3px;
    max-width: 70%;
    height: 300px;
    margin: 1em 0;
    padding: 1em;
    overflow: hidden;
    -webkit-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
}
.content-img {
    background: white;
    border-radius: 3px;
    width: 70%;
    margin: 1em 0;
    overflow: hidden;
    -webkit-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    -moz-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
    box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
}
.content-img img {
    zoom: 2;  //increase if very small images
    display: block;
    margin: auto;
    height: auto;
    max-height: 100%;
    width: auto;
    max-width: 100%;
}

Link to fiddle: https://jsfiddle.net/elliotsoomro/o68rhr1L/

Upvotes: 0

Views: 1730

Answers (1)

j08691
j08691

Reputation: 207861

It's a gap reserved for the descender text elements (e.g. j, y, p, q, g). You can get rid of it by adding vertical-align:top; to your image element.

jsFiddle example

Upvotes: 3

Related Questions