Remove created image-div spacing

Asked

Viewed 2,287 times

0

Would you like to understand why a spacing is created between the image and the div? How is it possible to see when adding the red background. And how to correct without using position or margin and padding negative?

.box-img {
  width: 100%;
  max-width: 200px;
  background-color: red;
  
  // tentando remover padding
  padding: 0 !important;
}

.box-img > img {
  width: 100%;
  height: 100%;
  
  // tentando remover margin
  margin: 0 !important;
}
<figure class="box-img">
  <img src="http://img1.topimagens.com/ti/th/200x200/lobos/lobos_068.jpg" alt="">
</figure>

css css3 sass

  • Remember also that there is no property called marging, to define the margins we use the property margin

  • @Ademílson typing error! Thanks for fixing! ;)

3 answers

3


Just add the positioning of the image:

Use this css for .box-img > img:

.box-img > img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

Simply put, just add this line of code in .box-img > img:

vertical-align: middle;

  • Thanks @Bruno Rigolon. But I ended up discovering that adding a display: block; in the image I have the same result as vertical-align: Middle;. ;)

  • Perfect @Alan. But I would recommend working with vertical-align. If you are accustomed to using some CSS framework, such as bootstrap, by default they set: img {vertical-align: Middle}. Exactly to avoid this type of behavior and virtually 99% of cases, vertical-align as Middle is what we expect.

  • Thanks for the tip. I’m already adding in my reset the img {vertical-align: Middle}! :)

1

You can solve this by adding a height to the PAI div (.box-img)

.box-img {
  width: 100%;
  max-width: 200px;
  height: 200px;
  background-color: blue;
}
img {
  width: 100%;
  height: 100%;
}

  • For what I’m doing the father div can’t have a fixed height.

0

Another solution I found was to add a display: block; in the image!

.box-img {
  width: 100%;
  max-width: 200px;
  background-color: red;
  
  // tentando remover padding
  padding: 0 !important;
}

.box-img > img {
  width: 100%;
  height: 100%;
  display: block;
  
  // tentando remover margin
  marging: 0 !important;
}
<figure class="box-img">
  <img src="http://img1.topimagens.com/ti/th/200x200/lobos/lobos_068.jpg" alt="">
</figure>

Browser other questions tagged css css3 sass

You are not signed in. Login or sign up in order to post.