标签外边距 - 爱码网

像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>

效果如图：
标签外边距