站長(zhǎng)資訊網(wǎng)
在html中，span不是塊元素，而是內(nèi)聯(lián)元素（行內(nèi)元素）。span元素主要用于容納文字，多個(gè)span元素可以在一行顯示；且span元素的寬高是由內(nèi)容決定的，無(wú)法用width和height屬性設(shè)置。而塊元素是獨(dú)占一行的，且寬高是可以設(shè)置的。
本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。
span不是塊元素，而是內(nèi)聯(lián)元素（行內(nèi)元素），主要用于容納文字。span只是把內(nèi)容定義成一個(gè)整體進(jìn)行操作，不影響布局和顯示。
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { width: 100px; height: 100px; } </style> </head> <body> <span>你好</span> <span>hello</span> </body> </html>
可以看出：多個(gè)span元素可以在一行顯示；且span元素的寬高是有所包含的內(nèi)容決定的，無(wú)法width和height屬性設(shè)置。而這些都是行內(nèi)元素的特點(diǎn)。
塊級(jí)元素
塊級(jí)元素的display屬性通常為block，為什么說通常呢，因?yàn)橄雔i的display屬性就是list-item，table 的 display 屬性是 table， 但他們都是塊級(jí)元素。
塊級(jí)元素的特點(diǎn)
-
塊級(jí)元素獨(dú)占一行
-
可設(shè)置元素的寬度、高度、行高、外邊距、內(nèi)邊距
-
塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間
-
可以容納內(nèi)聯(lián)元素和其它塊元素
為什么塊級(jí)元素要獨(dú)占一行呢？ 因?yàn)閴K級(jí)元素的寬度會(huì)占滿整個(gè)父元素的寬度，所以也就沒有多余空間來顯示其它元素了，只能另起一行。
常見塊級(jí)元素有：
<div> <p> <h1>~<h6> <ol> <ul> <dl> <table> <address> <blockquote> <form>
行內(nèi)元素
行內(nèi)元素的display屬性為：inline
行內(nèi)元素的特點(diǎn)
-
和其他行內(nèi)元素并列顯示在一行上；
-
元素的寬度、高度不可設(shè)置，可設(shè)置行高 line-height
-
元素的寬度就是它包含的文字或圖片的寬度，不可改變。
-
行內(nèi)元素只能容納文本或者其他行內(nèi)元素
-
行內(nèi)元素可設(shè)置水平方向的外邊距，但垂直方向不可以設(shè)置，內(nèi)邊距padding 水平和垂直可以設(shè)置
常見行內(nèi)元素元素：
<a> <span> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
推薦教程：《html視頻教程》
