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