行内元素的padding和margin是否无效
2016-11-30 本文已影响2075人
siberiawolf0307
行内元素的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并没有被撑开，只是从显示效果上看貌似被撑开了。
