塊元素&行內元素

大多數HTML 元素被定義爲塊級元素或內聯元素。塊級元素在瀏覽器顯示時，一般會以新行來開始（和結束）

block元素特色

1 老是在新行上開始；

2 高度，行高以及外邊距和內邊距均可控制；

3 寬度缺省是它的容器的100%，除非設定一個寬度。

4 它能夠容納內聯元素和其餘塊元素

 

inline元素特色

1 和其餘元素都在一行上；

2 高，行高及外邊距和內邊距不可改變；(margin padding只有左右邊距有效，上下無效)

3 寬度就是它的文字或圖片的寬度，不可改變

4 內聯元素只能容納文本或者其餘內聯元素

 

在考慮inline的時候，咱們就須要考慮inline元素究竟是行內可替換元素仍是行內不可替換元素。

討論margin-top和margin-bottom對行內非替換元素是否其做用:

1. 規範容許margin能夠設置到行內元素。

2. 因爲向一個行內非替換元素應用margin，對行高沒有影響。

3. 而且margin是透明的，因此聲明margin-bottom, margin-top沒有任何視覺效果。

4. 而對於行內非替換元素應用左右的margin，是有影響的。

討論margin-top和margin-bottom對行內替換元素是否其做用:

1. 爲行內替換元素設置margin會影響行高。

2. 因此margin-top和margin-bottom是有視覺效果的。

3. 對行內替換元素應用左右的margin，也是有影響的。

討論padding-top和padding-bottom對行內非替換元素是否其做用:

1. 明確是有做用的，能夠設置背景顏色看出來。

2. 不會影響block佈局。

討論padding-top和padding-bottom對行內替換元素是否其做用:

1. 明確是有做用的，能夠設置背景顏色看出來。

2. 也會影響block佈局的。