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

Posted 2023-03-06

【中文标题】如何创建不添加边距的边框？

【英文标题】：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 属性。

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

【问题讨论】：

@everyone ，谢谢你的支持，这真的鼓励了我.. :D

【参考方案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;

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

见：http://jsfiddle.net/djuj5jte/3/

【讨论】：

不错！但是 IE8 不会理解它。

大便！我没有看到 IE8 的要求。在这种情况下，我的投票将投给@dfsq 的答案。

谢谢！我实际上认为如果不需要 IE8，您的方法会更好。

【参考方案3】：

你可以添加

html 
  box-sizing: border-box;

*, *:before, *:after 
  box-sizing: inherit;

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

有用的链接：https://css-tricks.com/box-sizing/

【讨论】：

好的，我从您对上一个答案的评论中看到您正在使用它:)

确保链接是显示块或内联块:)

为什么是内联块或块