0

can somebody please explain me why there is this small yellow padding below the image? I know that the yellow space on the right of the image is normal but why below? Any idea how to fix this?

Thank you!

http://jsfiddle.net/uu0dggmr/

HTML:

<body>

<div id="page">

    <div class="box">

        <div class="info" style="background:yellow">
        <img src="https://placehold.it/350x150" style="max-width:100%;height:auto">
        </div>

     <div class="info">Text</div>

</div>

<footer>Footer</footer>

</div>

</body>

CSS:

body{margin:0;font-size:100%}

#page{margin: 0 auto}

footer{background:black;color:white}

.box {background:white}
.info {background:orange}

@media screen and (min-width:480px) {

  .box {width:100%;float:left}
  .info {width:50%;float:left}

}
WeekendCoder
  • 915
  • 3
  • 11
  • 15
  • It's not padding. It's the browser providing space for **descenders**. Here's my answer explaining how it works: *[Mystery white space underneath image tag](http://stackoverflow.com/a/31445364/3597276)* – Michael Benjamin Aug 21 '15 at 00:41

2 Answers2

2

The img is an inline element, so it takes the line-height into consideration. To avoid the space below the image you can do one of the following things:

  • set float: left on the image
  • set display: block on the image
  • set line-height: 0 on the .info div
Jakub Bilko
  • 111
  • 3
2

It's a whitespace, like a line break. You could set another css tag for it. when the holder has an image to set the line-height to zero.

<body>
<div id="page">
<div class="box">
    <div class="info image-holder" style="background:yellow">
        <img src="https://placehold.it/350x150" style="max-width:100%;height:auto">
        </div>
    <div class="info">Text</div>
</div>
<footer>Footer</footer>
</div>
</body>

CSS

body{margin:0;font-size:100%}

#page{margin: 0 auto}

footer{background:black;color:white}

.box {background:white}
.info {background:orange}
.info.image-holder {
    line-height: 0;
}

@media screen and (min-width:480px) {

  .box {width:100%;float:left}
  .info {width:50%;float:left}

}
dnetix
  • 320
  • 3
  • 10