行内元素的padding和margin是否无效

来源：东饰资讯网

行内元素的padding、margin是否无效？之前在开发的时候没有注意到这个小细节，现在特此整理出来。

首先行内元素是否具有盒子模型？
答：行内元素同样具有盒子模型。

行内元素的padding、margin是否无效？
答：

行内元素的padding-top、padding-bottom、margin-top、margin-bottom属性设置是无效的
行内元素的padding-left、padding-right、margin-left、margin-bottom属性设置是有效的
行内元素的padding-top、padding-bottom从显示的效果上是增加的，但其实设置的是无效的。并不会对他周围的元素产生任何影响。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            background-color: red;
            margin:10px;
            padding: 30px;
        }
    </style>
</head>
<body>
    <span>我是span</span>
    <div>我是div</div>
</body>

Paste_Image.png

观察上面这张图，

span标签左右外边距10px，说明行内元素的margin-left设置是有效的
span标签左右内边距30px，说明行内元素的padding-left设置是有效的
span标签上边距为0px，下边距为30px，说明行内元素的padding-top设置是无效的。
div标签中的文字我是div和span标签中的文字我是span两行相连接，并没有任何间距，说明行内元素的padding-top、padding-bottom并没有被撑开，只是从显示效果上看貌似被撑开了。

显示全文

全部栏目

行内元素的padding和margin是否无效