Images get inconsistent compared to div elements despite the same css
I have a div.pets with multiple images and divs inside it. The css for the pet class applies to both the img and the div, but the images become inconsistent like in the image:
Here is my html:
<div class="container">
<div class="pets">
<img src="/images/animal1.png" class="pet">
<img src="/images/animal1.png" class="pet">
<img src="/images/animal1.png" class="pet">
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
</div>
</div>
And the css for pets and pets:
.pets {
background-color: lightgrey;
margin-top: 15vh;
border: 1px solid black;
text-align: center;
}
.pet {
background-color: red;
border-radius: 100%;
width:20vh;
height:20vh;
display: inline-block;
}
How do I make the images match the div?
+3
source to share
2 answers
Since you gave display: inline-block;
add vertical-align
too:
.pet {
background-color: red;
border-radius: 100%;
width:20vh;
height:20vh;
display: inline-block;
vertical-align: middle;
}
The default is vertical-align: baseline;
. This is the reason.
.pets {
background-color: lightgrey;
margin-top: 15vh;
border: 1px solid black;
text-align: center;
}
.pet {
background-color: red;
border-radius: 100%;
width: 20vh;
height: 20vh;
display: inline-block;
vertical-align: middle;
}
<div class="container">
<div class="pets">
<img src="//placehold.it/100?text=Pet" class="pet">
<img src="//placehold.it/100?text=Pet" class="pet">
<img src="//placehold.it/100?text=Pet" class="pet">
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
<div class="pet"></div>
</div>
</div>
+4
source to share