13.3.2　块元素与行内元素

块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化。代码13.4表示了DIV与SPAN的区别，即设置块元素与行内元素时，用display属性可以对其转化。

代码13.4　DIV与SPAN区别二

—————————————文件名：DIV与SPAN区别二.html—————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞DIV与SPAN区别二＜/title＞

04 ＜style type="text/css"＞

05 #div1

06 {

07 /设置内联对象/

08 display：inherit；

09 }

10 #span1

11 {

12 /设置块对象/

13 display：block；

14 }

15 ＜/style＞

16 ＜/head＞

17 ＜body＞

18 1.这在容器外

19 ＜div id="div1"＞

20 这里会另起一行。样式设置display：inherit

21 ＜/div＞

22 ＜span id="span1"＞这里也会另起一行。样式设置display：block＜/span＞

23 ＜/body＞

24 ＜/html＞

【代码解析】第19～21行用DIV设置了样式display属性值为inherit，而在代码第22行的SPAN标记中，其CSS属性display被设置为block，在实际效果中，块元素与行内元素之间的变化如图13.4所示。

13.3.2　块元素与行内元素 - 图1

图　13.4　DIV与SPAN区别二

注意　如果不对DIV元素设置任何CSS属性，那么显示的效果将与P元素的效果一样。这也就是本实例的含义。