內聯元素與塊級元素及內外邊距的影響

塊級元素(block)：

新行開始；

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

寬度缺省是它的容器的100%

可以嵌套內聯元素和其他塊元素

常用的塊級元素：div、h1~h6、dl、ul、ol?

內聯元素(inline)：

和其他元素都在一行上；

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

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

常用的內聯元素：a、span、img、input、lable、select、strong、textarea

?替換元素:

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

例如瀏覽器會根據<img>標簽的src屬性的值來讀取圖片信息并顯示出來，而<img>只是指向一個圖像文件，又如<input>標簽的type屬性來決定是顯示輸入框，還是單選按鈕等。

非替換元素：

指內容包含在文檔中的元素。

例如，如果一個段落的文本內容都放在該元素本身之內，則這個段落就是一個非替換元素。

明確外邊距可以應用到行內元素

向一個內聯非替換元素應用外邊距，對行高(line-height)沒有任何影響

向一個內聯非替換元素應用內邊距上下邊距時，對行高(line-height)沒有任何影響，但當應用左右邊距時，會對顯示效果有影響，因此可以設置padding-left/right,margin-left/right

<style type="text/CSS">
? ? ? ?#two{
? ? ? ? ? ?background-color: red;
? ? ? ? ? ?width:100px; ?
? ? ? ? ? ?margin-right:50px;
? ? ? ? ? ?padding-left:50px;
? ? ? ?}
? ?</style>
? ?<span id="one">1111</span>
? ?<span id="two">2222</span>
? ?<span id="three">3333</span>

?

?4.當一個內聯非替換元素應用外邊距，由于其外邊距是透明而行高無影響，所以不顯示視覺效果，但當上色時，由于內邊距是非透明的，因此可以顯示出效果

<style type="text/css">
? ? ? ?#two{
? ? ? ? ? ?background-color: red;
? ? ? ? ? ?margin-top:50px;
? ? ? ? ? ?padding-bottom: 50px;
? ? ? ?}
? ?</style>

? ?<span id="one">1111</span>
? ?<span id="two">上下對行高均無影響，但padding可顯色</span><br />
? ?<span id="three">除去行高區域外均不占文本流空間</span>

效果:

?

5.對于一個內聯替換元素而言，為其設置的內外邊距等實際上是為其替換元素所設置的，會影響到替換元素的尺寸邊距，從而影響到行高，因此可以設置margin和padding

網上找的，希望能幫到你

內聯元素第二特點說的是高度，寬度及頂部和底部邊距不可設置，沒說padding不可設置，根據實際結果padding是可設置的，其中頂部和底部邊距不可設置是指margin的top和bottom不可設置，可以檢驗下。但是left和right設置有效