内联元素设置padding和margin的有效性

内联元素无法设置宽高(img,input等替换元素除外),其大小取决于内容,被内容撑开。

padding和margin的设置对内联元素的有效性

.first{
            display: block;
            color: purple;
            background-color: aquamarine;
        }
.second{
            border: 10px solid black;
            color: pink;
            background-color:peru;
        }
<div class="first">
        我有display:none属性,我不会显示
    </div>
<span class="second">
        我是span元素,我是内联元素
    </span>

 

结论:内联元素水平方向上的内边距(padding-left, padding-right)可以正常设置,垂直方向上的内边距,从视觉效果上来说是可以设置的,但会影响到整体布局。

内联元素外边距margin水平方向上设置有效,垂直方向上无效。


版权声明:本文为m0_65251054原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。