像span这样的内联元素,默认情况下,只有左右外边距,没有上下外边距。 为了观察上下外边距的效果,可以采用块级元素,比如div.
给span元素加上下外边距是没有效果的。
如下图:
采用块级元素对span添加上边距样式:
<style>
.red{
border:1px solid red;
background-color:green;
}
.margin{
border:1px solid red;
background-color:green;
margin-left:10px;
}
div{
margin-top:20px;
}
</style>
<span class="red"> 无外边距的span </span>
<span class="red"> 无外边距的span </span>
<br/>
<div>
<span class="red"> 无外边距的span </span>
<span class="margin"> 有左外边距的span </span>
</div>
并且,span默认是内联元素(不会有换行,width和height也不会生效)。可以将span标签转换成块级元素,使用display:block; 表示块级元素,块级元素会自动在前面和后面加上换行,并且在其上的width和height也能够生效。
<style>
div,span{
border: 1px solid lightgray;
margin:10px;
width:200px;
height:50px;
}
.d{
display:block;
}
</style>
<div>普通的div块</div>
<span>这是普通span</span> <span>这是普通span</span> <span>这是普通span</span>
<span class="d">这是span,被改造成了块级元素</span>
效果如图: