内联元素

内联元素

内联元素的内联指的是外在盒子，和display:inline元素不是一个概念
与内联元素有关的盒子有内联盒子，行框盒子。行框盒子是多个内联盒子组成的，每一行是一个行框盒子。
内联元素的特点：

1. inline元素不可设置width，inline-block元素可设置width。

2. padding断行，内联元素的padding会随着元素内部测换行而换行，padding-left加在第一行最左边，padding-right加在最后一行。padding-top和padding-right都加。

1、如果只有两行

     <div class="father">
         <span class="son">啊哈哈哈哈哈哈哈哈</span>
     </div>

      .father{
          width: 100px;
          background-color: yellow;
      }
      .son{
          
        padding: 15px;
          background-color: blue;
      }

根据后来者居上的原则，下面的padding-top会遮盖住上面的内容，所以才会这么显示。

2、超过两行

     <div class="father">
         <span class="son">啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈或</span>
     </div>

      .father{
          width: 100px;
          background-color: yellow;
      }
      .son{
          
        padding: 15px;
          background-color: blue;
      }

中间一行继承了了padding-top和padding-bottom，但是无padding-left或者padding-right，所以第二行遮住了第一行的内容，同理最后一行也是。

幽灵空白节点

在HTML5声明的文档中，每一个行框盒子前面都会存在一个宽度为0，高度和文本一样的空白节点。
但是在测试的时候发现空的span元素高度为0，但是设置了display:inline-block后居然出现了高度

     <div class="father">
         <span class="son"></span>
     </div>

设置了display:inline-block后

      .son{
         display: inline-block;
      }

后来查阅了资料才知道出现幽灵空白节点是有条件的