html - padding in the `a` element goes out of table cell instead of fetch the height -

in table, have a element. applying padding on that. padding goes out of cell instead of fetch height of table-cell - wrong here?

here snippet :

.table{      display:table;      width:100%;      clear : both;      border-top:1px solid gray;  }    .column {      display:table-cell;      border-bottom:1px solid red;      height:2em;      border-right:1px solid gray;      vertical-align:bottom;  }    .table2 {      clear:both;      padding-top:2em;      background:yellow;  }

<div class="table">      <div class="column">another table</div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>  </div>  <div class="table table2">      <div class="column">          <a href="#">testing</a>      </div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>  </div>

help please?

you need change display of anchor block or inline-block

.table{      display:table;      width:100%;      clear : both;      border-top:1px solid gray;  }    .column {      display:table-cell;      border-bottom:1px solid red;      height:2em;      border-right:1px solid gray;      vertical-align:bottom;  }    .table2 {      clear:both;      display:block; /*<--- here*/      padding-top:2em;      background:yellow;  }

<div class="table">      <div class="column">another table</div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>  </div>  <div class="table table2">      <div class="column">          <a href="#">testing</a>      </div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>      <div class="column"></div>  </div>