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即可。