html - 添加边框而不改变 block 的高度

Question

我有一些表格，基于 div。当表行悬停时，我想在它的顶部和底部添加边框。但是尽管 box-sizing: border-box，我的 block 还是变大了 2 个像素。行不能有固定的高度。

这里是例子:https://jsfiddle.net/j4nwdju6/

我不能只添加不可见或透明的边框，因为它会在行之间产生空白。

Answer 1

您可以通过调整悬停状态的顶部和底部边距来抵消这一点:

JS fiddle

.row:hover {
    background: yellow;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: -1px 0;
}