CODEWITHSUNDEEP
htmlcss
Sergej Fomin
Sergej Fomin

Reputation: 2002

CSS table-cell height equal to img height

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.

JSFIDDLE

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

Answers (1)

Aaron
Aaron

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

Related Questions