I want to make a grid of 8 images with 4 images in a row with no gap between images. For a row I used an unordered list and floated them towards the left. In the output there is a gap between the two unordered list which was not expected. Can someone explain why ?
Using inspect element I can see that the figure element takes the correct size but the img element has a little less height than expected.
How should I correct it ?
CSS:
*{
padding: 0;
margin: 0;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li{
display: block;
float: left;
width: 25%;
}
.meal-photo {
width: 100%;
margin: 0;
padding: 0;
}
.meal-photo img {
width: 100%;
height: 100%;
}
html:
<body>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</body>
Aucun commentaire:
Enregistrer un commentaire