1. 程式人生 > >css display: inline、block和inline-block

css display: inline、block和inline-block

inline:使元素變成行內元素(內聯),擁有行內元素的特性,即

1. 與其他行內元素共享一行

2. 不能修改width、height屬性,大小由內容撐開

3. padding屬性 top、right、botto、left設定都有效;margin屬性只有left、right設定有效

 

block: 使元素變成塊級元素,擁有塊級的特性,即

1. 獨佔一行,在不設定自己的寬度的情況下,塊級元素會預設填滿父級元素的寬度

2. 可以修改width、height屬性

3. padding、margin四個方向的值設定均有效

 

inline-block: 使元素變成行內塊級元素,結合了行內元素和塊級元素的特性(不獨佔一行的塊級元素),即

1. 與其他行內元素共享一行

2. 可以修改width、height屬性

3. padding、margin四個方向的值設定均有效

 

歡迎關注、點贊