label设置宽度无效的原因以及处理方式【内联元素和块级元素总结】

今天在写前端代码的时候给label标签设置宽度，代码如下

<label class="label" style="color: red;width: 200px ;height: 20px;line-height: 20px;text-align: center;border-radius: 10px; font-size: 12px;"></label> 

结果在前端进行调试的时候，label的宽度始终只有60，也就是我的width和height无效的，后来才想到label是内联元素，是不占行的，如果要设置宽度和高度按照通常的办法都是无效的，需要做一些处理在代码中加

 display: inline-block;

设置display的属性，即

<label class="label" style="color: red;width: 200px ;height: 20px;line-height: 20px;text-align: center;border-radius: 10px; font-size: 12px; display:inline-block"></label> 

所以常见的内联元素还有：

a – 锚点

abbr – 缩写

acronym – 首字

b – 粗体(不推荐)

bdo – bidi override

big – 大字体

br – 换行

cite – 引用

code – 计算机代码(在引用源码的时候需要)

dfn – 定义字段

em –