內聯元素的填充

我在讀一本關於CSS基礎知識的書。本書聲稱，一個內聯元素具有完整的填充屬性，但沒有margin-top/button屬性，只有margin-left/right屬性。內聯元素的填充

我的第一個問題是，我可以在哪裏找到這個官方聲明？我發現here，如果margin-top/bottom設置爲'auto'，則設置爲'0'。但是，與「邊際/底線不適用於內聯元素」沒有什麼不同嗎？

我的第二個問題是，內聯元素是否真的獲得了完整的填充屬性？我想下面的例子：

<!DOCTYPE html> 
<html> 

    <head>  
    </head> 

    <body> 

     <div style="margin: 20px; 
      border: solid 20px; 
      background: red;"> 
      <p style='margin:0'>test test test test test test test 
test test test test test test test test test test test 
test test test test test test 


<strong style="padding:20px;background-color:yellow">hello</strong> 


test test test test</p> 
     </div> 
      </body> 

</html>

現在這表明，填充實際工作不知何故，但由於某種原因填充頂和padding-底對周圍的文本沒有影響。這是爲什麼？這在W3標準中有沒有提及？

來源

2015-11-09 Adam

你問關於保證金，但給一個填充的例子？你的問題你陳述「內聯元素有完整的填充屬性」，你的例子顯示，所以你的問題是什麼。 – Leeish

@Leeish也是這個例子顯示填充只能工作50％。背景顏色應用於填充頂部，但填充頂部對周圍文本沒有影響。因此我聲稱填充不能按預期工作。 – Adam

看到我的答案。它正在向'strong'元素添加填充。但是內聯元素沒有「高度」作爲塊和行內塊元素。它們不會像塊元素那樣影響父母的身高，因爲內聯元素的「高度」是根據您鏈接的10.6.1的行高。 – Leeish

它被要求在一個內聯元素擁有完整填充特性，但沒有邊距/按鈕屬性，僅保證金左/右性質的書。

我的第一個問題是，我可以在哪裏找到這個官方聲明？

你不會，因爲它不是真的。在box model它說，對上邊距和下邊距：

這些特性對非替換行內元素沒有影響。

但「無效」並不意味着屬性不存在。具體而言，它們確實存在用於繼承的目的。考慮下面這個例子：

p { border:1px solid red } 
 
i { vertical-align:top; } 
 
span { margin-top: 20px; margin-bottom: 20px; } 
 
b { display:inline-block; } 
 
.two { margin:inherit; }

<p><i>Hello</i> <span>World <b class="one">my good friend</b></span></p> 
 
<p><i>Hello</i> <span>World <b class="two">my good friend</b></span></p>

我們可以看到，類B元素「兩節」繼承了保證金頂部和內嵌的底部性質，非替換span元素，並且因爲是b元素是內聯塊，邊界頂部和底部確實會導致佈局差異。如果跨度上不存在邊緣頂部和底部屬性，那將是不可能的。

來源

2015-11-15 21:59:28 Alohci

，但由於某種原因，對周圍的文本沒有影響

嘗試strong元素置換margin爲padding，增加display:inline-block到strong風格

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 
    <div style="margin: 20px; 
 
      border: solid 20px; 
 
      background: red;"> 
 
    <p style='margin:0'>test test test test test test test test test test test test test test test test test test test test test test test test 
 
     <strong style="margin:20px;background-color:yellow;display:inline-block;">hello</strong> 
 
     test test test test</p> 
 
    </div> 
 
</body> 
 
</html>

來源

2015-11-09 23:22:42 guest271314

你想證明內聯元素沒有margin-top/bottom嗎？因爲那我看不到你的觀點，因爲背景顏色只適用於填充，而不適用於邊距。 – Adam

@Adam Post將'margin'應用於'strong'元素，其中周圍文本受'margin'屬性影響，將'display：inline-block'包含到'strong'元素。如果檢查'strong'元素沒有應用'inline-block'，'margin-top'，'margin-bottom'仍然適用於元素 - 'display'設置爲'inline'。雖然元素沒有應用「內嵌塊」或「塊」顯示，這會在視覺上影響周圍文本 – guest271314

我的第一個問題是，我可以在哪裏找到這個官方聲明？我在這裏發現，如果margin-top/bottom設置爲'auto'，那麼它將設置爲'0'。但是，與'邊際頂部/底部框架不適用於內聯元素'沒有什麼不同？

在8.1框模型規格（http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin）「的裕度邊緣包圍盒餘量。如果邊緣具有0寬度（高度），餘量邊緣是相同的邊界邊緣」。

在您鏈接的頁面中10.6.1「'height'屬性不適用，但框的高度由'line-height'屬性給出。」因此，由於高度不適用，所以邊緣與邊緣相同。

我的第二個問題是，內聯元素是否真的完成了填充屬性？我試了下面的例子：

與上面相同的原因。「框的高度由'line-height'屬性給出」。該強元素的高度由line-height設置，因爲它沒有高度可以作爲塊或內聯塊元素引用。我很確定，如果你給它的內聯塊屬性，它將作爲一個塊在模型中有高度。

來源

2015-11-09 23:32:23 Leeish

謝謝。不過，我對WC3文檔還不熟悉，這可能就是爲什麼我不明白你的結論。這是我的第一個問題：我看到它在10.6.1中說過***如果margin-top設置爲'auto'，那麼它被設置爲0 ***。我有這樣的感覺，你說***無論什麼邊際分配，它將被設置爲0 ***，但我沒有找到這種說法。 – Adam

「他們的計算值爲0」之後，它說「'高度'屬性不適用，但框的高度由'line-height'屬性給出。」所以，跟着我，如果'高度'屬性不適用，那麼我在8.1中的盒子模型中，我鏈接的盒子的高度只能由'line-height'設置，至少這是我理解它的方式。 – Leeish

內聯元素的填充

回答

相關問題