input后追加span元素_块级元素和内联元素部分属性效果展示

本博客展示了以下各种元素对width、height、line-height、margin、padding、background、text-align属性的效果：

1、span元素；

2、div元素；

3、display:inline元素；

4、display:block元素；

5、display:inline-block元素。

2019年1月24日在结尾总结后新增对inline元素border效果展示。

---

1、span元素对使用width、height、line-height、margin、padding、background、text-align的效果；

（1）不带文字的span效果展示

（1-1）背景颜色在有字体的span上会直接展示，在无字体的span上没有直接展示。

（1-2）在没有字体的span里增加了text-align、width、height、padding-bottom、padding-top、maring-top、margin-bottom、marging-left、margin-right还是没有背景颜色效果产生，并且周围也不影响。

（1-2-1）在没有字体的span里通过开发者工具可以看到 text-align、width、height、padding-bottom、padding-top、maring-top、margin-bottom都没有任何效果。

（1-2-2）在没有字体的span里通过开发者工具可以看到margin-left，margin-left会产生效果范围，但是并不影响周围分布效果。

（1-2-3）在没有字体的span里增加line-height，发现会影响下面的参照物往下面移动，但是背景颜色还是不会出现。

(1-3)在没有字体的span里只有padding-left和padding-right可以显示颜色效果，这里只展示了padding-left。

不仅如此，在设置了padding-left或padding-right的基础之上部分属性就可以使用，部分属性还是不可以使用。

(1-3-1)在设置了padding-left或padding-right的基础之上，再设置padding-bottom后会产生效果，并且跟block元素交叉处，会覆盖block元素的颜色，但是block字体不会覆盖。在跟inline元素或者inline-block元素交叉处，自身颜色会被覆盖。

(1-3-2)在设置了padding-left或padding-right的基础之上，再设置padding-top后会产生效果，并且跟block、inline、inline-block元素交叉处，会覆盖block元素的颜色，并且字体也会覆盖。

(1-3-3)在设置了padding-left或padding-right的基础之上，再设置margin-left或者margin-right后会产生效果，这里只展示margin-left。

(1-3-4)在设置了padding-left或padding-right的基础之上，再设置margin-top、margin-bottom、width、height这几个元素还是没有任何颜色效果。并且开发者模式中也没有效果范围。

---

（2）带文字的span效果展示

为了方便视觉效果后面都把背景颜色设置出来。

（2-1-1）带文字的时候增加了text-align、height、width、垂直方向的margin-top、margin-bottom五个属性不会产生任何效果。

(2-1-2）不仅如此，通过开发者工具可以看到带文字的span增加了text-align、height、width、垂直方向的margin-top、margin-bottom五个属性不会产生任何效果范围。

（2-2）带文字的时候line-height、水平方向的margin-left、margin-right、padding-left、padding-right可以产生效果。

（2-2-1）line-height行高可以使span产生行高的效果，但是背景颜色不会跟着变化。

(2-2-2）margin-left和margin-right可以对span产生效果，但是背景颜色不会产生变化，这里只表示了left方向。

（2-2-3）padding-left和padding-right可以产生效果，并且背景颜色也跟着变化，这里只展示了left方向。

（2-3&