Thomas David Baker Thomas David Baker - 3 months ago 9
CSS Question

Bad interaction between line-height and border-width breaks vertical rhythm - can they be reconciled?

I'm trying to implement a baseline/vertical rhythm on a responsive site. Top and bottom borders on table cells are causing me trouble. I have a minimal version of the problem here:

http://codepen.io/bakert/pen/akZWXE

If you set the border on th/td to 0 the vertical grid is respected from top to bottom and the text in both columns lines up. If you set the border to 0.0625em/1px/anything and scroll down below the table you will see that the columns are now out of whack. The text in the table itself is also no longer respecting the vertical grid.

The problem is that line-height does not account for border-width. The two things are additive in determining the height of the

td
s. Ideally I'm looking for something like
box-sizing: border-box
but for line-height + border.

I could solve this by explicitly giving
th.bordered, td.bordered
a fractionally smaller
line-height
than
p
but that sounds pretty awful. Should I be setting my vertical rhythm using something other than
line-height
? A combination of
line-height
and margin and I then reduce the margin by the width of the border? I'm hoping there's something simpler than that!

Answer
  table {
    width: 100%;
    box-shadow: inset -1px -1px 0 0 #ccc;
  }
  td {
    padding-right: 1em;
    width: 50%;
    box-shadow: inset 1px 1px 0 0 #ccc;
  }

EDIT - September 4th
Fix for background-color.
You can use border for element and margin should move element below 1px up. So border on table would not create another line-height problem. But this can not be used on elements.

  table {
    width: 100%;
    margin-bottom: -1px;
    border: 0 1px 1px 0;
    border-style: solid;
    border-color: #ccc;
  }