删除HTML / CSS中的边框偏移量

Question

<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>

在Chrome中呈现：

渲染时，边框占据空间＆＃39;并抵消内容的位置以及增加内容所需的大小。有没有办法使边界不这样做？也就是说，边框没有任何边框的间距/填充效果？

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

我考虑过在不需要时使边框始终存在但是透明，但这会使间距和填充变得非常麻烦，我想要有不同大小的边框。

注意：如果需要，我 能够使用CSS3和HTML5。

Answer 1

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

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

Answer 2

如果你坚持边界必须是＆＃34; over＆＃34;内容，想要一个边界半径，不担心它的外观，然后你需要有重叠的html元素（非常糟糕的风格，不推荐，但如果这是你想要的）。

我更改了文字以包含一个低于基线的字母，更改了字体大小和边框作为可靠的演示，但所有这些都可以根据您的需要进行更改。

＆＃13;

＆＃13;

.border 
{
border: 5px solid blue;
border-radius: 1em;
position:relative;
top:-40px; /*double of font-size in p tag*/
color:transparent;
width:36px;
display:block;
font-size:10px;/*20px from original- 2 x border size*/
padding:0px;
}

.normal
{
width:40px;
font-size:20px;
}

＆＃13;

<p class="normal">Hellq</p>
<p class="normal">Hellq</p>
<p class="normal">Hellq</p>
<span class="border">1</span>
<p class="normal">Hellq</p>
<p class="normal">Hellq</p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用 outline 属性。

<p>Hello</p>
<p>Hello</p>
<p><span style="outline: dashed blue; border-radius: 1em;">Hello</span></p>
<p>Hello</p>
<p>Hello</p>

https://developer.mozilla.org/fr/docs/Web/CSS/outline