本文详细探讨了span、div、display:inline、display:block和display:inline-block等元素对width、height、line-height、margin、padding、background、text-align属性的影响。展示了在有无文字情况下，这些属性如何改变元素的布局和视觉效果，包括颜色显示、尺寸调整、边距和内填充的影响。还特别提到了inline元素的border特性及其与其他元素交互的情况。
本博客展示了以下各种元素对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）带文字的时候垂直方向padding-top和padding-bottom比较难产生效果。
为什么说比较难，因为情况稍微复杂一点。
浏览器默认的字体是Microsoft YaHei（微软雅黑），字体默认大小是16px.
默认字体和字体大小情况下，设置比较小的padding-top或者padding-bottom就会出现一点点效果。
但是如果设置超过一定数值就会变得很奇怪。
（2-3-1）不设置padding-top或padding-bottom的效果。
（2-3-2）设置padding-top或者padding-bottom比较小的时候，比如设置padding-top:10px;
（2-3-3）设置padding-top或者padding-bottom比较大，超过一定数值，比如:padding-top:22369617px;
同样的padding-top:22369617px;我们通过调整字体和字体大小看看有什么变化。
（2-3-3-1）保持padding-top:22369617px不变，改变字体为SimHei，发现背景红色会下移动的变化。
（2-3-3-2）保持padding-top:22369617px不变，改变字体大小为40px，发现背景红色会向上移动的变化。
2、div元素使用width、height、line-height、margin、padding、background、text-align的效果；
（1）不带文字的div效果展示
无文字的情况下只有设置水平方向的padding-left和padding-right后，除文字部分的效果属性外，其他的属性跟有文字的时候达到的效果一样。
(1-1)在没有字体的div里增加了text-align、width、margin-left、margin-right、line-height、padding-left、padding-right，还是没有背景颜色效果产生，周围也不影响。通过开发者工具也没有产生影响范围。
(1-2)在没有字体的div里增加了margin-bottom或者margin-top会产生相应的效果，这里只展示margin-bottom:100px;发现下面的元素往下方移动了。
(1-3)在没有字体的div里增加了padding-bottom，padding-top、height，背景颜色会呈现出来，这里只展示padding-bottom:100px和height: 100px；
不仅如此，在设置了padding-bottom、padding-top、height其中一个的基础之上部分属性就可以使用，部分属性还是不可以使用。
（1-3-1）在设置了padding-bottom、padding-top、height其中一个的基础之上，再设置margin-left或margin-right会产生效果，这里只展示margin-left:100px；
（1-3-2）在设置了padding-bottom、padding-top、height其中一个的基础之上，再设置width会产生效果。
（1-3-2-1）在设置了padding-bottom、padding-top、height其中一个的基础之上，再设置width，之后设置padding-left、padding-right就可以产生效果。这里只展示 padding-left:200px;
（1-4）在设置了padding-bottom、padding-top、height其中一个的基础之上，再设置text-align、line-height没有任何效果产生，开发者模式下也没有影响范围。
（2）带文字的div效果展示
为了方便视觉效果后面都把背景颜色设置出来。
带文字的时候增加了line-height、text-align、height、width、margin-left、margin-right、margin-top、margin-bottom、padding-top、padding-bottom、padding-left、padding-right都会产生相应效果。
没有text-align的时候默认是内容水平方向靠左。
（2-1）增加了text-align:center;仅仅改变内容的水平方向分布居中，对背景颜色和周围没有任何影响。
（2-2）设置height：100px；产生的效果。
（2-3）设置 width会产生效果。
（2-3-1）如果设置的宽度比字体宽度要大，但是比一行宽度要小，比如width:100px;产生的效果。
（2-3-2）如果设置的宽度比字体宽度要小，比如width:10px，会使字体跑到背景颜色外面去。
（2-4）设置line-height: 100px;产生的效果与height很类似，但是还有一个特点就是内容自动垂直居中了。
line-height经常可以与height一起设置。
（2-4-1）如果设置height: 10px;比line-height: 100px;要小很多。背景颜色就会跑到文字上面去。
（2-4-2）如果设置height: 100px;比line-height: 1px;要大很多。文字内容就会跑到背景颜色上面去。
（2-4-3）如果设置height: 10px;line-height10px: 都设置特别小，小于字体高度，并且相等,文字内容就会上下突出背景颜色外面去，但是会保持垂直方向居中。
（2-4-4）默认字体大小是16px；如果设置height: 20px；line-height：20px； 稍大于字体，或者等于字体大小，并且相等，文字内容就会完美呈现啦，还会保持垂直方向居中，这也是推荐的用法。
（2-5）margin水平方向的变化与span元素一样，背景颜色与margin分隔。
（2-6）padding的水平方向的变化与span元素一样，背景颜色与padding不分隔。
（2-7）垂直方向跟span不同，margin在span元素上不可以产生效果，而div元素可以产生正常的效果，背景颜色与margin分隔。
（2-8）垂直方向跟span不同，padding在span元素上产生奇怪的效果，涉及到字体大小与字体设计有关，而div元素可以产生正常的效果，背景颜色与padding不分隔。
div元素效果展示结束。
3、display:inline;使用width、height、line-height、margin、padding、background、text-align的效果；
打开开发者模式从span可以看到它的默认是display就是inline:
所以可以得出设置display：inline；的效果跟span默认效果一样。
4、display:block;使用width、height、line-height、margin、padding、background、text-align的效果；
打开开发者模式从div可以看到它的默认是display就是block：
所以可以得出设置display：block；的效果跟div默认效果一样。
5、display:inline-block;使用width、height、line-height、margin、padding、background、text-align的效果；
（1）不带文字的inline-block效果展示
（1-1）背景颜色在有字体的inline-block上会直接展示，在无字体的inline-block上没有直接展示。
无文字的情况下设置margin-bottom、margin-top、padding-bottom、padding-top、height，会使下面的元素往下面的方向移动。
(1-2-1)margin垂直方向只展示margin-bottom:150px;
(1-2-2)padding垂直方向只展示padding-bottom:150px;
(1-2-3)无文字的情况下设置height会使下面的元素往下面的方向移动。
(1-3)无文字的情况下设置text-align、line-height、width、margin-left、margin-right、padding-left、padding-right不会产生颜色效果，不会影响周围元素，在开发者模式中也没有任何影响范围。
（1-4）padding-right、padding-left、padding-bottom、padding-top、height、width垂直和水平方向的组合就可以使背景颜色展示出现。
垂直方向：height、padding-bottom、padding-top;
水平方向：padding-right、padding-left、width。
（1-4-1） 无文字的情况下设置垂直方向的height和水平方向的padding-right后的展示效果。
（1-4-2）无文字的情况下设置垂直方向的padding-top和水平方向的padding-right后的展示效果。
（1-4-3）无文字的情况下设置垂直方向的height和水平方向的width后的展示效果。
（2）带文字的inline-block效果展示
为了方便视觉效果后面都把背景颜色设置出来。
带文字的时候增加了line-height、height、width、margin-left、margin-right、margin-top、margin-bottom、padding-top、padding-bottom、padding-left、padding-right都会产生相应效果。效果跟block元素完全一样。
带文字的inline-block元素唯一与block元素的区别是text-align需要结合width才能得到效果,或者结合padding、margin使得部分文字水平方向占领一行后才会按照最长的一行文字实现水平居中效果。
（2-1）单独设置text-align的时候没有任何效果产生。
（2-1-1）当text-align与width结合使用时候可以得到文字在水平方向居中的效果。
当设置了width的时候发现文字默认是水平靠左对齐。
当设置了width的前提下再设置text-align: center;发现文字可以实现水平方向居中，对背景颜色和周围没有任何影响。
（2-1-2）当text-align与padding结合使用，使得部分文字水平方向占领一行后才会按照最长的一行文字实现水平居中效果。
当设置了padding-right:1000px;的时候发现文字默认是水平靠左对齐。（padding与背景颜色不分隔）。
当设置了padding-right:1000px;使得部分文字水平方向占领一行后，再设置text-align: center;发现文字可以按照最长的一行文字实现水平居中效果，对背景颜色和周围没有任何影响。
（2-1-3）当text-align与margin结合使用，使得部分文字水平方向占领一行后才会按照最长的一行文字实现水平居中效果。
当设置了margin-right:1000px;的时候发现文字默认是水平靠左对齐。（margin与背景颜色分隔）。
当设置了margin-right:1000px;使得部分文字水平方向占领一行后，再设置text-align: center;发现文字可以按照最长的一行文字实现水平居中效果，对背景颜色和周围没有任何影响。
(2-2)设置height：100px；产生的效果。
（2-3）设置 width会产生效果。
（2-3-1）如果设置的宽度比字体宽度要大，但是比一行宽度要小，比如width:100px;产生的效果。
（2-3-2）如果设置的宽度比字体宽度要小，比如width:10px，会使字体跑到背景颜色外面去。
（2-4）设置line-height: 100px;产生的效果与height很类似，但是还有一个特点就是内容自动垂直居中了。
line-height经常可以与height一起设置。
（2-4-1）如果设置height: 10px;比line-height: 100px;要小很多。背景颜色就会跑到文字上面去。
（2-4-2）如果设置height: 100px;比line-height: 1px;要大很多。文字内容就会跑到背景颜色上面去。
（2-4-3）如果设置height: 10px;line-height10px: 都设置特别小，小于字体高度，并且相等,文字内容就会上下突出背景颜色外面去，但是会保持垂直方向居中。
（2-4-4）默认字体大小是16px；如果设置height: 20px；line-height：20px； 稍大于字体，或者等于字体大小，并且相等，文字内容就会完美呈现啦，还会保持垂直方向居中，这也是推荐的用法。
（2-5）margin水平方向的变化，背景颜色与margin分隔。
（2-6）padding的水平方向的变化，背景颜色与padding不分隔。
（2-7）margin在垂直方向的变化，背景颜色与margin分隔。
（2-8）padding在垂直方向的变化，背景颜色与margin不分隔。
inline-block元素效果展示结束。
总结：
展示效果较多，为了防止自己过段时间忘记了就列表总结各效果。
由于知乎使用表格感觉挺麻烦的，只能用截图总结。
单独属性的可用性
组合使用的可用性；
2019年1月24日在分割线上面的基础上发现inline元素的border很有趣，记录下来
inline元素的border可以显示出来，但是不占用文档流行与行之间的空间，由于一行的行高默认是由文字本身大小及设计决定的，而左右的border是可以显示并且占用文档流的空间，所以第一行的两个inline元素左右的border是可以分隔，但是上下的border就不可以，上面的高度被限制的字体大小挡住，下面与block元素重合，并把block元素覆盖。
下面的border也与block元素重合，并且覆盖了block元素。
inline元素的border如果换行后与“inline/inline-block”元素的border重合，会被下面的“inline/inline-block”元素的border覆盖。
如果inline元素和inline-block元素在一行上面，并且设置的border相等，那么就可以看到inline元素上下的border了，并且不重合，因为inline-block元素的border是占用文档流行与行之间的空间的。
本文为本人的原创文章，著作权归本人所有，转载务必注明来源
374
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
