css - chrome/safari 中不显示边框的边距

Question

奇怪的问题:

         .nav_active {
           padding: 8px 0 8px 0;
           border-top: 5px solid #2778ad;
           border-bottom: 5px solid #2778ad;
           border-left: none;
           border-right: none;
         }

 <span class="nav_active"><a class="active" href="/home">Home</a></span>

在 FF 中这工作正常，有两个 5px 的边框，顶部和底部的链接距离为 8px。在 chrome 中，这些行指向链接文本。如果我在左侧和右侧制作边框，它也适用于 chrome。

有人知道为什么这在 chrome 上不起作用吗？

Answer 1

使用 block 或内联 block 元素:

.nav_active {
  padding: 8px 0 8px 0;
  border-top: 5px solid #2778ad;
  border-bottom: 5px solid #2778ad;
  border-left: none;
  border-right: none;
  display: inline-block;/*now padding-top,padding-bottom gets affected properly*/
}