一直以为行内元素设置内外边距会不起效,之前也没有具体的去实验,只是在需要设置 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:
<div class="container">
<p>
<span>我想要边距</span>
<span>我想要边距</span>
</p>
<p>我是一个P</p>
</div>
CSS:
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
margin: 20px auto;
text-align: center;
}
p {
border: 2px solid #0f9deb;
}
span {
padding: 10px;
margin: 10px;
background: #F0DE7D;
line-height: 20px;
}
</style>
声明:本文由w3h5原创,转载请注明出处:《行内元素内外边距探究:为何span设置上下margin和padding不起效》 https://cloud.tencent.com/developer/article/1537965