行內元素的padding和margin屬性

Ambber發表於2018-12-19
padding

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;        
    }複製程式碼

效果圖如下：

行內元素的padding和margin屬性

同是行內元素，但表現不同的原因在於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>是一個不可替換元素，文字“段落的內容”全被顯示。


相關文章