htmlspan设置外边距,⾏内元素内外边距探究：为何span设置
上下margin和pad。。。
⼀直以为⾏内元素设置内外边距会不起效，之前也没有具体的去实验，只是在需要设置 margin 或者 padding 的时候给元素设置⼀个display: inline-block; 就得了。
今天正好有时间，就来实验了⼀把。原来 span 标签默认的不是只能设置左右边距，还有更有意思的现象。
我给 span 标签设置了 10px 的内边距和外边距，并设置了背景⾊，外⾯嵌套⼀个 p 标签。
从 span 的背景⾊可以看出，padding 是设置上了。只不过⽆法把p标签撑开罢了。 margin 则只能设置左右边距，上下边距不起效。
但是 padding-top 去哪了？怎么看不到呢？
我⼜给外部容器设置了⼀个外边距，这样上内边距就显⽰出来了。
原来 span 等⾏内元素是可以设置内边距 padding 的，只不过元素本⾝⽆法把⽗元素撑开，看上去就是设置的 padding 上下边距不起效了，⽽ margin 就只能设置 span 的左右边距。
所以，如果要给 span 设置边距，⼀般的⽅法就是给它设置⼀个 display: inline-block; ，把它变成⾏内块级元素就可以了。
贴⼀下代码：
HTML：
我想要边距
我想要边距
我是⼀个P
CSS：
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
margin: 20px auto;
text-align: center;
}
p {
border: 2px solid #0f9deb; }
span {padding是外边距还是内边距
padding: 10px;
margin: 10px; background: #F0DE7D; line-height: 20px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。