如何创建不添加边距的边框？

Question

我是 HTML/CSS 的新手，正在学习 Bootstrap。

我正在编写一个 Bootstrap 导航栏，我遇到了一个小困难，这是我完成的工作的 fiddle。

在 HTML 代码中有用于构建 TWBS 导航栏的正常标记，我添加了更改活动选项卡颜色的代码：

.navbar-nav a.active {
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    border-top: 2px solid #212121;
}

问题： <a> 标签内的文本现在被稍微下推，我注意到 border-top CSS 属性的功能更像 margin-top 属性.

如何避免这种情况并创建不添加边距的边框？

Answer 1

您可以设置活动 a 伪元素的样式 :before 并将其相对于父元素定位：

.navbar-nav a.active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
}

演示： http://jsfiddle.net/djuj5jte/5/

Answer 2

您可以添加

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

这样边框将成为元素宽度的一部分。

Answer 3

您可以使用内嵌框阴影：

box-shadow: inset 0px 3px 0px 0px #212121;

这有不改变元素大小或需要伪元素的好处，但遗憾的是 <=IE8 不支持；(

How to create a border that does't add a margin?