內聯格在跨度不包含所有的文字高度

我有這樣的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>

我改變了「內聯」到「inline-block的」。在這種情況下，跨越多行並具有邊框的線條不僅僅覆蓋文本。我所嘗試的是，如果只有整個文本的一部分有邊界。邊框封面是整條線。這是正常的，或者我可以爲此嗎？

I was expecting this output when using inline-block.

來源

2016-02-29 nav

如果你還沒有想通出來，看看我的回答 – AVI

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

由於與顯示元素：內聯塊元件是像顯示：內聯元件，但它們可以具有寬度和高度。所以你可以使用一個內嵌塊元素作爲塊來給出邊界。

看到這個What is the difference between display: inline and display: inline-block?

來源

2016-02-29 05:46:04 civam

我添加「inline-block」後編輯了我的問題。現在我有一個不同的問題，即邊框覆蓋整行，而不是隻覆蓋文本部分。 – nav

@nav然後檢查出我的答案 – AVI

謝謝DoughnutZombie。這不是我想要完成的。爲了更加清晰，讓我編輯我的問題。 – nav

嘗試增加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日有效的「這是一些文本」的一部分，這是超出<div>。所以你必須使用<br>如下。

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

來源

2016-02-29 05:43:39 AVI

這不是一個解決方案，這是一個解決方法 – smnbbrv

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

來源

2016-02-29 05:44:15 WisdmLabs

更改display:inline;到display:inline-block; DEMO

來源

2016-02-29 05:45:00

嘗試顯示：inline-block的，而不是在線.. 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>

來源

2016-02-29 05:45:26

嘗試刪除display:inline，從div標籤。

來源

2016-02-29 05:46:04

你也可以添加填充到跨度，可以在不同的側面不同，試試這個，並刪除任何一個邊界不適合你的需求：

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

來源

2016-02-29 05:59:52

內聯格在跨度不包含所有的文字高度

回答

相關問題