1. 程式人生 > >行內元素和塊級元素:內聯(行級)元素不能設定margin-top

行內元素和塊級元素:內聯(行級)元素不能設定margin-top

內聯(行級)元素 不能設定寬高,但padding屬性可以設定,需要注意的是行級元素不能設定margin-top和margin-bottom屬性,但可以設定margin-left和margin-right屬性。如果需要設定行級元素的margin-top或margin-bottom屬性,必須將行級元素轉換成內聯塊級元素或塊級元素。

行內元素和塊級元素

行內元素一般是內容的容器,而塊級元素一般是其他容器的容器。一般情況下,行內元素只能包含內容或者其它行內元素,寬度和長度依據內容而定,不可以設定,可以和其它元素和平共處於一行;而塊級元素可以包含行內元素和其它塊級元素,且佔據父元素的整個空間,可以設定 width 和 height 屬性,瀏覽器通常會在塊級元素前後另起一個新行。

因此,行內元素適合顯示具體內容,而塊級元素適合做佈局。常用的行內和塊級元素如下:

級別元素
行內元素a,b,strong,span,img,label,button,input,select,textarea
塊級元素header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

之所以說“一般情況下”,是因為元素的級別不是一成不變的,瀏覽器是按照規範規定元素預設的級別,但是可以通過“display”屬性改變其級別。