內聯元素與塊級元素

• 塊級元素(block)：

新行開始；

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

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

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

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

?

• 內聯元素(inline)：

和其他元素都在一行上；

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

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

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

?

其中內聯元素的寬高及內外邊距有一些需要主要注意的地方

<input type="text"> <input type="text" style="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;" value="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;"> <input type="text">

顯示效果：

而：

<span>第一個</span> <span style="padding-left:100px;margin-left:50px;padding-top:50px;width:100px;">第二個</span> <span>第三個</span>

顯示效果：

=> <input><span>同為內聯元素，為什么<input>可以設置寬高，內外邊距，而<span>不能呢？

這是因為：

內聯元素中含有兩類：替換元素和非替換元素

• ?替換元素:

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

例如瀏覽器會根據<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

?

?

?

轉載于:https://www.cnblogs.com/alia/p/4733985.html

總結

以上是生活随笔為你收集整理的内联元素与块级元素及内外边距的影响的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。