0

I'm trying to understand why a table cell containing inline elements doesn't wrap them tightly.

To be more specific I would expect the cell to be as tall as the highest contained element. But in my example the cell is taller than it should be. There is a bottom gap under it's content and moreover, the content is not vertically aligned - the glyphicon should be in the middle.

I would appreciate for any explanation.

Here is my code:

* {
  box-sizing: border-box;
}

td {
  border: 1px solid black;
  vertical-align: middle;
  padding: 0;
}

.title-content {
  display: inline-table;
}

.color-box, .color-box + span {
    display: table-cell;
    vertical-align: middle;
}

.color-box {
    padding: 0 5px;
}

.color-box-border {
    border: 1px solid #cccccc;
    height: 16px;
    padding: 1px;
    width: 10px;
}

.color-box-canvas {
    height: 100%;
    width: 100%;
    background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td>
      <span class="glyphicon glyphicon-minus"></span>
      <div class="title-content">
       <div class="color-box">
        <div class="color-box-border">
        <div class="color-box-canvas"></div>
      </div>
     </div>
       <span>NODE</span>
      </div>
    </td>
  </tr>
</table>
Jan Krakora
  • 2,500
  • 3
  • 25
  • 52
  • This happens with baseline-aligned inline elements. Set another `vertical-align`. – Oriol Dec 10 '15 at 15:43
  • The vertical-align is intended for content elements? I thought it's intended for the td element itself. – Jan Krakora Dec 10 '15 at 15:50
  • `vertical-align` can be used on a table-cell to align its contents with respect to the table cell, or can be used on inline elements to align them with respect to the line box. – Oriol Dec 10 '15 at 15:52
  • No need to delete it. This way other people may find the answers there through your question. – Oriol Dec 10 '15 at 16:29

0 Answers0