Border at Bottom Of Div, no padding or margin

Question

please take a look at this superduper simple pen, maybe someone can tell me where the space in the div under the image is coming from?

HTML

<div class="parent">
    <img src="url">
</div>

CSS

.parent {
    display: inline-block;
    background-color: indianred;
    padding: 0;
    margin: 0;

    img {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

https://codepen.io/hergi/pen/MQLQRd

thanks in advance, this sh/t is driving me crazy right now :'/

img float:left can solve your problem but how it comes from is still a question — code.rider, Mar 01 '18 at 08:04

score 3 · Accepted Answer · answered Mar 01 '18 at 07:58

3

It is because <img> is an display: inline-block element. You can read https://css-tricks.com/fighting-the-space-between-inline-block-elements to understand it.

For short term, you can add

display: block to .parent img
or add font-size: 0 to .parent to fix it.

.parent {
  display: inline-block;
  position: relative;
  background-color: indianred;
  padding: 0;
  margin: 0;
  width: 500px;
  height: 350px;
}

.parent img {
  display: block;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  margin-bottom: 0;
  position: relative;
}

.hover-border {    
  box-sizing: border-box;
  transition: ease all .3s;
  border: 0 solid rgba(0,0,0,.3);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  &:hover
}

<div class="parent">
  <img src="https://echtlieb.de/themes/Frontend/Echtlieb/frontend/_public/src/img/produkteigenschaften/frauen/doerte/stoff/stoff-sweat_(grau_meliert).jpg" />
  <div class="hover-border">
    
  </div>
</div>

answered Mar 01 '18 at 07:58

w3debugger

1,887
16
21

1

thank you, your link explained it very good :) – SHRX Mar 01 '18 at 08:04
@w3debugger, why are you height and width to the div and use 100% of them for the img? This will make all images 500x350, even if they are big. Simply adding 'display: block' to the image should be sufficient as the answer to this question. – ivp Mar 01 '18 at 08:07
1

@ivp I didn't modify anything else. I copied her code and just provide the solution she wants. :) – w3debugger Mar 01 '18 at 08:19
1

ok. Cool. My bad then. :) – ivp Mar 01 '18 at 08:23

score 1 · Answer 2 · answered Mar 01 '18 at 08:05

Just add 'display: block;' to the image. No need to provide height and width to the parent div.

.parent {
    display: inline-block;
    background-color: indianred;
    padding: 0;
    margin: 0;
}

.parent img {
  display: block;
  padding-bottom: 0;
  margin-bottom: 0;
}

<div class="parent">
  <img src="https://echtlieb.de/themes/Frontend/Echtlieb/frontend/_public/src/img/produkteigenschaften/frauen/doerte/stoff/stoff-sweat_(grau_meliert).jpg" />
 
</div>

score 0 · Answer 3 · answered Mar 01 '18 at 07:51

Just add margin:0px to body tag, by default it takes some margin. check updated snippet below..

.parent {
  display: inline-block;
  background-color: indianred;
  padding: 0;
  margin: 0;
}
.parent img {
  padding-bottom: 0;
  margin-bottom: 0;
}

body {
  margin: 0px;
}

<div class="parent">
    <img src="https://echtlieb.de/themes/Frontend/Echtlieb/frontend/_public/src/img/produkteigenschaften/frauen/doerte/stoff/stoff-sweat_(grau_meliert).jpg" />
</div>

this one also has the red line for me oO – SHRX Mar 01 '18 at 07:59 — SHRX, Mar 01 '18 at 07:59

Border at Bottom Of Div, no padding or margin

3 Answers3