我正在讀一本關于CSS基礎的書。該書聲稱內聯元素具有完整的填充屬性，但沒有margin-top / bottom屬性，只有margin-left / right屬性。我的第一個問題是，在哪里可以找到它作為正式聲明？我在這里發現，如果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-top并且padding-bottom對周圍的文本沒有影響。這是為什么？W3標準中的任何地方都提到了這一點嗎？
3 回答
呼如林
TA貢獻1798條經驗 獲得超3個贊
該書聲稱內聯元素具有完整的填充屬性，但沒有margin-top / button屬性，只有margin-left / right屬性。
我的第一個問題是，在哪里可以找到它作為正式聲明？
您不會，因為那不是真的。在框模型中，它表示對于上邊距和下邊距：
這些屬性對未替換的內聯元素沒有影響。
但是，“無效”并不意味著該屬性不存在。具體來說，它們確實是出于繼承的目的而存在?？紤]以下示例：
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>
我們可以看到類“ two”的b元素繼承了行內非替換跨度元素的margin top和bottom屬性，由于b元素是inline-block，margin-top和bottom確實引起布局差異。如果span上不存在margin-top和bottom屬性，那將是不可能的。
jeck貓
TA貢獻1909條經驗 獲得超7個贊
但由于某種原因，它對周圍的文字沒有影響
嘗試替換margin為padding在strong元素，加入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>
- 3 回答
- 0 關注
- 394 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消