亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

內聯元素的填充

內聯元素的填充

吃雞游戲 2019-11-21 09:38:04
我正在讀一本關于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屬性,那將是不可能的。


查看完整回答
反對 回復 2019-11-21
?
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>


查看完整回答
反對 回復 2019-11-21
  • 3 回答
  • 0 關注
  • 394 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號