HTML 區塊與行內元素

HTML 區塊與行內元素

更新於 發佈於 閱讀時間約 3 分鐘

區塊(block)元素特點

1.區塊(block)元素都會另起一行。

2.hiehgt、line-height、margin、padding 的高度與寬度都可以設置。

3.默認情况下,區塊元素的寬度會自動填满其父元素寬度延申,寬度100%的情況下會自適應延申佔滿整個區塊。

4.可以設置寬高 width hight

5.區塊元素常見包括

div、p、h1~h6、ul、ol、li、form、table。

<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等等

6.<div>:用在排版的區塊標籤,本身不代表任何意思


行內(inline)元素特點

1.和其他元素都在同一行上,相鄰的行内元素会並排在同一行,

直到一整行排不下才會換行,其寬度隨元素的内容而變化。

2.設置寬度與高度無效,只能由内容撑起来,即行内元素設置width,height屬性無效。

3.無法設罝margin、padding的上下,只能設置padding 、margin左右,此時才會有效果出來。

4.水平方向的padding-left 、padding-right、margin-left、margin-right都會產生效果,但上下方向的padding-top、padding-bottom、margin-top 、margin-bottom不會產生邊距效果。

5.行內元素常見包括

a、span、img、input、br...等

6.若想對行內元素設置寬、高度,可以寫成 display: block 就可以設罝margin、padding的高度,例如如把 <a> 連結更改成區塊元素後,只要在點擊連結時都可以在區塊內部都可以點擊得到。


inline-block 的特點


1、會依照元素的內容決定內容的寬高,不會佔滿橫向的剩餘空間

2、可設置元素的寬高, width , height , max-width, max-height 與 line-height,也可以設罝 padding-top , padding-bottom。

3 同時俱有 block 與 inline 的特性。

avatar-img
tina huang的沙龍
0會員
1內容數
留言
avatar-img
留言分享你的想法!