行內元素的padding和margin屬性

1.對行內元素span設置padding-top、padding-bottom、margin-top、margin-bottom屬性時，並不會影響span所在行的行高，即便span元素的高度增長，也不會影響所在行的上下文元素的位置。

2.對行內元素span設置padding-left、padding-right、margin-left、margin-right元素會影響span元素在行內的位置。

3.對行內元素input設置padding-top、padding-bottom、margin-top、margin-bottom屬性時，會影響input所在行的行高。

4.對行內元素input設置padding-left、padding-right、margin-left、margin-right元素會影響input元素在行內的位置。

具體效果參見如下代碼：

<div id="first"></div>    
<p class="para">        
    我是一個段落的開始        
    <span class="inline">1</span>        
    <span class="inline">1</span>        
    <span class="inline">1</span>        
    這是段的結尾    
</p>    
<p class="para">        
    這是新的一段內容。 這是新的一段內容。 這是新的一段內容。 這是新的一段內容。    
</p>    
<p class="para"><input placeholder="行內元素input" /></p>
* {            
        padding: 0;            
        margin: 0;        
    }
 #first {            
        height: 100px;            
        background-color: gray;        
    }
 .para {            
        border: 1px solid #008B00;            
        margin: 10px;        
    }
  .inline {            
        border: 1px solid red;            
        padding: 20px;            
        margin: 20px;            
        /* display: inline-block; */        
    }
   .para input {            
        border: 1px solid blue;            
        padding: 20px;            
        margin: 20px;        
    }複製代碼

效果圖以下：

同是行內元素，但表現不一樣的緣由在於span爲不可替換元素，而input爲替換元素。

a) 替換元素

替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。

例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片信息並顯示出來，而若是查看(X)HTML代碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，仍是單選按鈕等。

(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素每每沒有實際的內容，便是一個空元素，例如：

<img src=」cat.jpg」/>
<input type="submit" name="Submit" value="提交"/>

瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。

b) 不可替換元素

(X)HTML的大多數元素是不可替換元素，即其內容直接表現給用戶端（例如瀏覽器）。例如：

<p>段落的內容</p>

段落<p>是一個不可替換元素，文字「段落的內容」全被顯示。