內(nèi)聯(lián)元素與塊級元素

• 塊級元素(block)：

新行開始；

高度，行高以及外邊距和內(nèi)邊距都可控制；

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

可以嵌套內(nèi)聯(lián)元素和其他塊元素

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

?

• 內(nèi)聯(lián)元素(inline)：

和其他元素都在一行上；

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

內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

常用的內(nèi)聯(lián)元素：a、span、img、input、lable、select、strong、textarea

?

其中內(nèi)聯(lián)元素的寬高及內(nèi)外邊距有一些需要主要注意的地方

<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>同為內(nèi)聯(lián)元素，為什么<input>可以設(shè)置寬高，內(nèi)外邊距，而<span>不能呢？

這是因?yàn)?#xff1a;

內(nèi)聯(lián)元素中含有兩類：替換元素和非替換元素

• ?替換元素:

替換元素就是瀏覽器根據(jù)元素的標(biāo)簽和屬性，來決定元素的具體顯示內(nèi)容。

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

?

• 非替換元素：

指內(nèi)容包含在文檔中的元素。

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

?

討論內(nèi)外邊距對行內(nèi)元素是否起作用，則要對行內(nèi)替換元素和行內(nèi)非替換元素分別討論：

明確外邊距可以應(yīng)用到行內(nèi)元素

向一個內(nèi)聯(lián)非替換元素應(yīng)用外邊距，對行高(line-height)沒有任何影響

向一個內(nèi)聯(lián)非替換元素應(yīng)用內(nèi)邊距上下邊距時，對行高(line-height)沒有任何影響，但當(dāng)應(yīng)用左右邊距時，會對顯示效果有影響，因此可以設(shè)置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.當(dāng)一個內(nèi)聯(lián)非替換元素應(yīng)用外邊距，由于其外邊距是透明而行高無影響，所以不顯示視覺效果，但當(dāng)上色時，由于內(nèi)邊距是非透明的，因此可以顯示出效果

<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">除去行高區(qū)域外均不占文本流空間</span>

效果:

?

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

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/alia/p/4733985.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。