元素是文檔結構的基礎，在CSS中，每個元素生成了一個包含了元素內容的框（box,也翻譯為“盒子”）。但是不同的元素顯示的方式會有所不同，例如div和span不同，而strong和p也不一樣。在文檔類型定義（DTD）中對不同的元素規定了不同的類型，這也是DTD對文檔之所以重要的原因之一。而根據元素本身的特點可以分為替換元素（replaced element）和非替換元素，非替換元素，在W3C中沒有給出明確的定義，但我們可以由替換元素對應著非替換元素，所以可以理解為除了替換元素，其它的就是非替換元素。
替換元素就是浏覽器根據元素的標簽和屬性，來決定元素的具體顯示內容。
替換元素是其內容不受CSS視覺格式化模型控制的元素，例如img標簽，嵌入的文檔（iframe之類）或者applet，這些叫做替換元素。比如img元素通過src屬性的值來讀取圖片信息並顯示出來，而如果查看(x)html代碼，卻看不到圖片的實際內容，而且img元素的內容通常會被src屬性指定的圖像替換掉；例如input元素的type屬性決定是顯示輸入框，還是單選按鈕等。(x)html中的img , input , textarea , select , object都是替換元素。這些元素沒有實際的內容，即是個空元素，例如：
<img src="girl.jpg"/>
<input type="submit" name="submit" value="提交"/> 浏覽器會根據元素的標簽類型和屬性來顯示這些元素。替換元素也在其顯示中生成了框。所以，替換元素通常有其固有的尺寸：一個固有的寬度，一個固有的高度和一個固有的比率。例如，一幅位圖有用絕對單位制定的寬度和高度，也有固有的寬高比率。另一方面，其他文檔也可能沒有固有的尺寸，比如一個空白的html文檔。
CSS渲染模型不考慮替換元素內容的渲染。這些替換元素的展現獨立於CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。
替換元素可增加行框高度，但不影響line-height,內容區高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。
要想替換元素居中，可以設置line-height = height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
*{
margin:0;
padding:0;
}
input{
height:50px;
line-height:50px;
padding:10px;
margin:20px;
background-color:#9deaf1;
text-align:center;
}
</style>
</head>
<body>
<input type="text" value="美女">
</body>
</html>頁面示意圖如下：
同時，此時的display:inline-block;上下左右padding都有效，margin上下左右都有效。
非替換元素：(X)HTML 的大多數元素是非替換元素，他們將內容直接告訴浏覽器，將其顯示出來。 例如：
<p>p的內容</p>
<label>label的內容</label>；浏覽器將把這段內容直接顯示出來。
行內非替換元素添加padding-top或padding-bottom，不影響行框高度，但內容區高度會變化，margin-top，margin-bottom對行框沒有任何影響。添加左右邊距會影響行內非替換元素水平位置。
對於行內元素，設置左右內邊距，左右內邊距將是可見的。而設置上下內邊距，設置背景顏色後可以看見內邊距區域有增加，對於行內非替換元素，不會影響其行高，不會撐開父元素。而對於行內替換元素，則撐開了父元素。看下demo，更好的理解下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
*{
margin:0;
padding:0;
}
div.wrapper{
margin:0 auto;
background-color:#9deaf1;
width:400px;
}
div input{
padding:50px;
margin:50px;
border:2px solid green;
background-color:#5dc2f6;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="text" value="美女"/>
</div>
</body>
</html>頁面示意圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
*{
margin:0;
padding:0;
}
div.wrapper{
margin-top:50px;
margin-left:50px;
background-color:#9deaf1;
width:500px;
}
div strong{
padding:50px;
margin:50px;
border:2px solid green;
background-color:#5dc2f6;
}
</style>
</head>
<body>
<div class="wrapper">
<strong>hello world</strong>
</div>
</body>
</html>示意圖：
上述demo證明，行內替換元素，例如input,設置上下padding，可以撐大父元素。
而行內非替換元素，如strong,設置上下padding，只是范圍擴大，可是無法撐大父元素，不會影響line-height;
inline元素（准確來說，是non-replace的inline元素）不能設置豎直方向上的margin和padding，這個是CSS標准所規定的。
margin的規定見這裡：請點擊
padding的規定見這裡：請點擊
之所以不能設置padding，是因為padding的值是根據目標元素的width計算出來的，而inline， non-replace元素的width是不確定的。
假如有不正確的或者需要指正的地方，歡迎告知，謝謝咯----妙瞳
