行内元素和块级元素：内联(行级)元素不能设置margin-top

短命女 2022-05-25 10:06 482阅读 0赞

内联(行级)元素 不能设置宽高，但padding属性可以设置，需要注意的是行级元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成内联块级元素或块级元素。

## 行内元素和块级元素 ##

行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。

因此，行内元素适合显示具体内容，而块级元素适合做布局。常用的行内和块级元素如下：

<table style="border-spacing:0px;width:852px;text-align:center;color:rgb(51,51,51);font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun;font-size:14px;background-color:rgb(255,255,255);"> 
 <thead> 
  <tr> 
   <th style="margin:0px;vertical-align:middle;">级别</th> 
   <th style="margin:0px;vertical-align:middle;">元素</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">行内元素</td> 
   <td style="margin:0px;vertical-align:middle;">a,b,strong,span,img,label,button,input,select,textarea</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;">块级元素</td> 
   <td style="margin:0px;vertical-align:middle;">header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer</td> 
  </tr> 
 </tbody> 
</table>

之所以说“一般情况下”，是因为元素的级别不是一成不变的，浏览器是按照规范规定元素默认的级别，但是可以通过“display”属性改变其级别。