html - line-height 和 border-width 之间的不良交互破坏了垂直节奏 - 它们可以调和吗？

Question

我正在尝试在响应式网站上实现基线/垂直节奏。表格单元格的顶部和底部边框给我带来了麻烦。我这里有一个最小版本的问题:

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

如果将 th/td 上的边框设置为 0，则垂直网格从上到下遵循，并且两列中的文本对齐。如果将边框设置为 0.0625em/1px/anything 并向下滚动到表格下方，您将看到列现在不正常了。表格中的文本本身也不再遵循垂直网格。

问题是行高不考虑边框宽度。在确定 td 的高度时，这两件事是相加的。理想情况下，我正在寻找类似 box-sizing: border-box 但行高 + 边框的东西。

我可以通过显式地给 th.bordered, td.bordered 一个比 p 小一点的 line-height 来解决这个问题，但这听起来很不错可怕。我应该使用 line-height 以外的东西来设置我的垂直节奏吗？ line-height 和 margin 的组合，然后我将边距减少边框的宽度？我希望有比这更简单的东西!

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;
  }

编辑 - 9 月 4 日
修复背景颜色。
您可以为元素使用边框，边距应将元素向上移动 1px 以下。所以表格上的边框不会产生另一个行高问题。但这不能用在元素上。

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