线高和边界宽度之间的不良相互作用打破了垂直节奏

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

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

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

我可以通过明确地给 th.bordered, td.bordered 比 p 稍微小一些 line-height 来解决这个问题，但听起来非常糟糕 . 我应该使用 line-height 以外的其他东西设置我的垂直节奏吗？ line-height 和保证金的组合我然后减少边界宽度的边距？我'm hoping there'比这简单！

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 - 9月4日
修复背景颜色 .
您可以使用border作为元素，margin应该将元素移动到1px以下 . 因此桌面上的边框不会产生另一个线高问题 . 但这不能用于元素 .

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

回复于 2024-04-27T17:57:49+08:00

线高和边界宽度之间的不良相互作用打破了垂直节奏 - 它们能够和解吗？

1 回答

相关问题