行內(nèi)元素的寬度和高度

行內(nèi)元素是否沒有寬高,寬高由字體多少和大小決定。但行內(nèi) 元素可以設(shè)置邊框和背景顏色,這讓我感到新奇!設(shè)想一下如果行內(nèi)元素嵌入塊級(jí)元素,情況會(huì)怎么樣呢。我對(duì)此做了一些測試。

代碼和情況如下,讓我比較困惑的是為何邊框會(huì)跑到下面, 另外 上邊框也看不見了。

后來經(jīng)過測試發(fā)現(xiàn),得出結(jié)論

1.行內(nèi)元素區(qū)域包括邊框大小和字體大小和 子元素(塊級(jí)元素)決定的。

2.上邊框不見是因?yàn)楸徊藛螜趽踝×?,在外層套一個(gè)div就不會(huì)有這種情況(在火狐上還可以看到一點(diǎn));

另外還有一些知識(shí)點(diǎn),比如塊級(jí)元素不設(shè)置寬高的情況下,寬度與父級(jí)元素寬度相等,高度與盒子內(nèi)容相等




最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,154評(píng)論 1 92
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,200評(píng)論 1 4
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,750評(píng)論 0 30
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 2,059評(píng)論 0 6
  • CSS盒模型 在CSS中盒模型被分為兩種,第一種是W3C的標(biāo)準(zhǔn)模型,第二種是IE怪異盒模型。兩種盒子模型都包括pa...
    _空空閱讀 3,583評(píng)論 0 3

友情鏈接更多精彩內(nèi)容