border-box adding 1px space on top and bottom of a block

Question

I need some help figuring out where a 1px space on top and bottom of a <a> inside a td comes from, and how to remove it.

The <a> is displayed as a flexbox, which is required, and fills the entire td.
It seems to be caused by border-sizing: border-box but I don't understand why (if you remove the property it works fine, but I kind of need it and would rather find another solution if a clean alternative exists).

table {
 border-collapse: collapse;
}

td {
 padding: 0;
}

td {
 width: 5rem;
 height: 5rem;
 padding: 0;
 border: 1px solid red;
}

a {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 width: 100%;
 height: 100%;
 border: 1px solid blue;
 outline: 0;
}

* {
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

<table>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
</table>

Just in Chrome, btw, Firefox and (even! IE 11) display is ok. — sinisake, Jan 03 '17 at 00:06
Try it in different browsers. It seems like different browsers count the border either inside or outside the border-box. — Kevin Swarts, Jan 03 '17 at 00:07
@sinisake, do you have a fix to make all browser behave the same way? — Kevin Swarts, Jan 03 '17 at 00:09
@sinisake thank you for pointing this out, I was indeed using chrome. still gotta fix it tho :D — QiMath, Jan 03 '17 at 00:11

Brett DeWoody · Answer 1 · 2017-01-03T00:38:47.273

Apply the box-sizing: border-box to the * selector, and box-sizing: content-box to the td > a elements. Also, the width: 100% can be removed from the a element.

* {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

table {
  border-collapse: collapse;
}

td {
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: 1px solid red;
}

td > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  border: 1px solid blue;
  outline: 0;
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  box-sizing: content-box;
}

<table>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
    <td>
      <a href="#">
      </a>
    </td>
  </tr>
</table>

thanks for your answer. However it seems to be working only because the property `* { box-sizing: border-box }` is removed from the css, which I need :/ I'm going to look into that ! — QiMath, Jan 03 '17 at 00:26
Ok, then apply `box-sizing: border-box` to `*` and apply `box-sizing: content-box` to `td > a`. The solution has been updated above. — Brett DeWoody, Jan 03 '17 at 00:39

border-box adding 1px space on top and bottom of a block

1 Answers1