删除HTML/CSS中的边框偏移

在Chrome中呈现：

渲染时，边框“占用空间”并偏移内容的位置，同时增加内容所需的大小。有没有办法让边境不这样做？也就是说，边界是否没有边界的任何间距/填充效果

期望的效果是，无论内容是否有边框，内容始终处于相同的位置，例如，上面截图中的所有H都具有相同的水平对齐。我可以接受边界重叠的内容以及向外延伸，但如果可能，我想知道如何做到这两个

我曾考虑过让边界始终存在，但在不需要时保持透明，然而这使得间距和填充非常麻烦，我希望有不同大小的边界

---

注意：如果需要，我可以使用CSS3和HTML5。

使用与边框宽度相同的负边距

你好

你好

你好

你好

---

您好

使用与边框宽度相同的负边距

你好

你好

你好

你好

---

您好

如果您坚持边框必须在内容上方，想要一个边框半径，不担心它的外观，那么您需要有重叠的html元素非常糟糕的样式，不推荐，但如果这是您想要的

我已经改变了文本，包括一个低于基准线的字母，改变了字体大小和边框，以便于演示，但所有这些都可以根据您的需要进行更改

边境 { 边框：5px纯蓝色； 边界半径：1米； 位置：相对位置； 顶部：-40px；/*p标记中字体大小的两倍*/ 颜色：透明； 宽度：36px； 显示：块； 字体大小：10px；/*20px比原来的大小-2倍边框大小*/ 填充：0px； } 典型的 { 宽度：40px； 字体大小：20px； }

Hellq

Hellq

Hellq

1.

Hellq

---

Hellq

如果你坚持边框必须在内容上方，想要一个边框半径，不担心它的外观，那么你需要有重叠的html元素，这种样式非常糟糕，不推荐，但如果你想要的话

我已经改变了文本，包括一个低于基准线的字母，改变了字体大小和边框，以便于演示，但所有这些都可以根据您的需要进行更改

边境 { 边框：5px纯蓝色； 边界半径：1米； 位置：相对位置； 顶部：-40px；/*p标记中字体大小的两倍*/ 颜色：透明； 宽度：36px； 显示：块； 字体大小：10px；/*20px比原来的大小-2倍边框大小*/ 填充：0px； } 典型的 { 宽度：40px； 字体大小：20px； }

Hellq

Hellq

Hellq

1.

Hellq

Hellq

您可以使用outline属性

<p>Hello</p>
<p>Hello</p>
<p><span style="border: 5px dotted blue; border-radius: 1em;">Hello</span></p>
<p>Hello</p>
<p>Hello</p>

您可以使用outline属性

<p>Hello</p>
<p>Hello</p>
<p><span style="border: 5px dotted blue; border-radius: 1em;">Hello</span></p>
<p>Hello</p>
<p>Hello</p>

---

轮廓与边框的作用相同，但不占用任何空间。@gp似乎没有轮廓半径。轮廓与边框的作用相同，但不占用任何空间。@gp似乎没有轮廓半径。谢谢，我主要想知道是出于好奇。事实上，我这么做也是出于同样的原因：关于它会变得多么困难/糟糕，并向好奇的人证明这一点谢谢，我主要是出于好奇才想知道。事实上，我这么做也是出于同样的原因：关于它会变得多么困难/糟糕，以及向任何好奇的人证明，我听说CSS被更改为使轮廓尊重边界半径，但看起来它还没有广泛的浏览器支持。如果你提醒我什么时候浏览器支持更好，我会尝试将你的答案标记为已接受的答案。啊，我听说CSS已更改为使轮廓符合边界半径，但看起来它还没有广泛的浏览器支持。如果您提醒我什么时候浏览器支持更好，我会尝试将您的答案标记为已接受答案。