HTML元素：行内元素和块元素

HTML中的元素分为行内元素和块元素：

(1)行内元素：
像span,image,a,strong等。这些元素在文档流中不会独占一行，有默认的宽度和高度，通常只支持margin-left/right padding-left/right。
例子1：

<span>我是span1</span><span>我是span2</span><a href="#">我是a1</a>

CSS属性如下：

span{        margin-top: 100px;        margin-left: 100px;        width: 200px;        height: 200px;    }    a{        width: 200px;        height: 200px;        margin-top: 100px;        margin-left: 100px;    }

在页面中的效果：

说明width,height,padding-top,margin-top都没效果。

但是input是很特殊的行内元素,它支持margin-top/bottom padding-top/bottom,width/height

例子2：
元素如下：

<input type="text" name="" value=""><input type="button" name="" value="button1"><input type="button" name="" value="button2">

CSS代码如下：

input{        margin: 50px;        padding: 50px;        width: 200px;    }

效果如下：

（2）块级元素
像div,p,ul,li,ol等都是块级元素，块级元素独占一行，自带换换行符，支持盒子模型属性设定。

（3）行内元素与块级元素的转换：
行内元素转换成块元素，只要设置其display属性为block即可。块元素转换成行内元素，只要将其display属性设置为inline即可。