Плохое взаимодействие между вертикальными ритмами линии и шириной границы - их можно примирить?

Question

Я пытаюсь реализовать базовый/вертикальный ритм на чувствительном сайте. Верхняя и нижняя границы ячеек таблицы вызывают у меня проблемы. У меня есть минимальная версия проблемы здесь:

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

Если установить границу на м/TD 0, вертикальная сетку уважала сверху вниз и текст в обеих колонках строк вверх. Если вы установите границу на 0.0625em/1px/anything и прокрутите вниз ниже таблицы, вы увидите, что столбцы теперь не в порядке. Текст в самой таблице также больше не учитывает вертикальную сетку.

Проблема в том, что линия-высота не учитывает границу ширины. Две вещи являются аддитивными при определении высоты td с. В идеале я ищу что-то вроде box-sizing: border-box, но для линии-height + border.

Я мог бы решить эту проблему, явно давая th.bordered, td.bordered меньше меньше line-height, чем p, но это звучит довольно ужасно. Должен ли я устанавливать свой вертикальный ритм, используя что-то другое, кроме line-height? Комбинация line-height и маржа, а затем уменьшаю границу по ширине границы? Я надеюсь, что есть что-то более простое!

Answer 1

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 - 4 сентября
Исправление для фона цвета.
Вы можете использовать границу для элемента, а margin должен перемещать элемент ниже 1px вверх. Таким образом, граница на таблице не создаст другой проблемы с высотой строки. Но это не может быть использовано для элементов.

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