inline元素的margin與padding

替換元素與非替換元素

替換元素(replaced element)：所謂替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素具體顯示什麼內容。好比說：img標籤的src屬性的值用來讀取圖片信息而且顯示出來。又好比說，input標籤的type屬性決定是顯示輸入框仍是單選按鈕。html中的img、input、textarea、object、video、embed都是替換元素。

非替換元素(non-replaced element): 是指內容包含在文檔裏的元素。好比p、span等等。

margin-top/margin-bottom與padding-top/padding-bottom

在考慮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佈局的。

參考:

是否是inline元素就不能設置寬高margin，padding？

CSS中的一些概念