Remove spacing created between image and div

Question

Remove spacing created between image and div

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I would like to understand why a spacing between the image and the div is created? As you can see by adding the red background. And how to fix without using position or margin and padding negatives?

.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

asked by anonymous 23.06.2017 / 18:56

3 answers

1

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

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

23.06.2017 / 19:05

0

Another solution I found was to add display: block; to 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>

23.06.2017 / 19:17

Apply focus to component Clear Modal Bootstrap

score 3 · Accepted Answer

Just add the image placement:

Use this css for .box-img > img :

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

Put simply, just add this line of code to .box-img > img :

vertical-align: middle;