以图例来表述行内元素和块级元素的区别会更加直观：
①行内元素会再一条直线上，是在同一水平线布局的。
| 1234 | /* css */``. green ,.yellow{ display : inline ;}``. green { background : green ;}``.yellow{ background :yellow;} |
|---|
| 12 | <!-- html -->``< span class = "green" ></ span >< span class = "yellow" ></ span > |
|---|
②块级元素各占一行，是垂直方向布局的。
| 1234 | /* css */``. green ,.yellow{ display : block ;}``. green { background : green ;}``.yellow{ background :yellow;} |
|---|
| 12 | <!-- html -->``< div class = "green" ></ div >< div class = "yellow" ></ div > |
|---|
综上所述：如果你要将行内元素变成块级元素，那么就只需要在该标签上加上样式 display:block; 这里已经牵涉到了CSS内容。块级元素可以用样式控制其高、宽的值。
行内元素不可以控制宽和高，除非你想将它转变成为块级元素或是行内块级元素inline-block否则它的宽和高，是随标签里的内容而变化。
