行内元素的特别之处

特别之处

1. width、height、margin-top、margin-bottom对于行内元素无效

2. padding-top、padding-bottom对于行内元素来说有效 ，但是相当于浮动的效果，其他盒子布局还是跟正常一样，不会移动，就是行内元素已经覆盖，也不会移动（自动动手试试）(设置padding-top、padding-bottom上下会多出区域，但是不占据空间)

   <style>
       span {
           background-color: red;
           padding-bottom: 20px;
       }
   </style>
   <span>James</span>
   <div>我是其他的盒子</div>
   

3. border-top、border-bottom也是跟padding一样的，会多出区域，但是不占据空间

解决方案：

上面的情况只是针对行内元素，而不是行内块级元素，所以只需要设置display：inline-block就可以了