Question

我有这个HTML：

<div style="border:1.00px solid #000000;display:inline;">
<span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>

我想应用边框仅覆盖文字。边框不覆盖跨度的整个高度。是什么原因？

编辑：

<div>
<div style="border:1.00px solid #000000;display:inline-block;">
<span style="font-family:Arial;font-size:20pt;">this is some text this is some text this is some this is some text</span>
</div>
<span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>

我改变了＃34;内联＆＃34; to＆＃34; inline-block＆＃34;。在这种情况下，跨越多行并且具有边界的行实际上不仅覆盖文本。我想要的是，如果只有整个文本的某些部分有边框。边界覆盖了整条线。这是正常的还是我可以为此做点什么？

I was expecting this output when using inline-block.

Answer 1

Use "display: inline-block;" instead of 'display:inline'.

Answer 2

尝试添加padding

<div style="border:2.00px solid #000000;display:inline-block; padding:4px ">
    <span style="font-family:Arial;font-size:20pt;">this is some text</span>
    </div>

Jsfiddle示例：https://jsfiddle.net/o9e2nktx/

修改

您目前遇到的问题是，您还没有将第二个span标记添加到当前<div>内，因此您还必须添加它以覆盖整个文本。

JS小提琴：https://jsfiddle.net/q4gy5zun/1/

否则，如果您希望它像上一个示例一样，因为您的<div style="border:1.00px solid #000000;display:inline-block;padding:4px">代码仅对该特定<div>有效，这意味着您无法覆盖第5个＆＃34;这是一些文字＆＃34;部分，不在<div>之内。所以你必须使用<br>，如下所示。

JS小提琴：https://jsfiddle.net/q4gy5zun/2/

Answer 3

将display:inline;更改为display:inline-block; DEMO

Answer 4

尝试显示：内联块而不是内联.. Demo

<div style="border:1.00px solid #000000;display:inline-block;">
<span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>

Answer 5

将 div 显示更改为内联块

<div style="border:1.00px solid #000000;display:inline-block;">
    <span style="font-family:Arial;font-size:20pt;">this is some text</span>
</div>

因为带有display的元素：inline-block元素就像display：inline元素，但它们可以有宽度和高度。因此，您可以使用内联块元素作为块来提供边框。

请参阅此What is the difference between display: inline and display: inline-block?

Answer 6

尝试从div标签中删除display:inline。

Answer 7

你也可以在跨度上添加填充，在不同的边可以有不同的边缘，尝试这个并删除任何不适合你需要的边框：

<!DOCTYPE html>
<html>
<head></head>
<body>

  <div style="border:1.00px solid #000000;display:inline;">
      <span style="border: 2px solid red;padding: 10px;
         font-family:Arial;font-size:20pt;">this is some text</span>
  </div> 

</body>

跨度上的内联div不包括全文高度

7 个答案: