css中的内联元素与块元素的不同点

现在设置几个内联元素span，然后设置一个块元素

<span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <div class="box1"></div>

1.现在试图改变内联元素的宽度高度，

    span{
                /* 内联元素不能设置宽度和高度 */
                background-color: red;
                height: 200px;
                width: 200px;
            }

却发现宽度高度并未发生改变

2.现在分别设置水平内边距和垂直内边距

padding-left: 100px;
 padding-top: 50px;

很明显,内联元素也是可以设置内边距的，但是不会对页面布局产生影响（如果是块元素则下面的块元素会被向下挤）

3.现在设置边框

border: 2px solid #FFFF00;

内联元素是可以设置边框的，但是水平方向对页面布局有影响，而垂直方向没有影响

4.设置外边距

margin-left: 100px;

 

我发现的是水平外边距不会像块元素一样发生重叠，而是会求和，如上面设置的左外边距为100px，而实际测出来的两个内联元素之间的距离之和为200px