Reputation: 2002
I have CSS-table (display: table) > with inner divs (display: table-cell) > with inner imgs.
Table-cells widths are equal to imgs' width, but the problem is table-cells' heights are not! It's adding some extra (4 or 5) px. So if my img is 100px (height), then table-cell is 104px.
HTML
<div class="table">
<div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
<div class="table-cell"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt=""></div>
<div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
</div>
CSS
.table {
display: table;
}
.table-cell {
display: table-cell;
background: black;
}
Please let me know why's this happening and how to solve it?
Upvotes: 2
Views: 345
Reputation: 10450
Add a display property to your images.
.table {
display: table;
}
.table-cell {
display: table-cell;
background: black;
}
img {
display: block;
}
<div class="table">
<div class="table-cell">
<img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
</div>
<div class="table-cell">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt="">
</div>
<div class="table-cell">
<img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
</div>
</div>
Upvotes: 2