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屬性,那將是不可能的。

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 瀏覽
相關問題推薦
添加回答
舉報