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

【问题标题】：How to create a border that does't add a margin?如何创建不添加边距的边框？
【发布时间】：2015-06-10 06:54:11
【问题描述】：

我是 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 属性。

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

物有所值！！！！ BUUUUT，我在 IE 8 上运行：D ...更不用说网络开发人员喜欢的操作系统 ... XP ：D ...我也已经在使用 psudo 元素进行转换。顺便说一句，box-border 不应该使边框不像边距吗？？
:before 在 IE8 中受支持，因此它应该可以工作。至于border-box.. 理论上是的，但实际上由于某种原因我无法在这种情况下使用边框框。
@dfsq ，我相信边框框不起作用，因为没有设置高度。另一种方法是从头开始设置边框并透明或通过 rgba()。 jsfiddle.net/djuj5jte/6

【解决方案2】：

您可以使用插入框阴影：

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

这样做的好处是不改变元素大小或需要伪元素，但遗憾的是

【讨论】：

【解决方案3】：

你可以添加

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

使边框成为元素宽度的一部分。

【讨论】：