码迷,mamicode.com
首页 > Web开发 > 详细

CSS 28 块之间的空格

时间:2020-07-15 23:38:54      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:多个   不同   float   技术   就会   mic   tom   导致   otto   

 步骤 1 : 

块之间有空格

如果多个span连续编写,像这样:
 
<span>连续的span</span><span>连续的span</span>
 

是不会有空格的
但是真正开发代码的时候,一般不会连续书写span,而是不同的span之间有回车换行,比如这样:
 
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
 

而这样编写代码,就会导致<span>之间出现空格
<style>
span{
border-bottom:2px solid lightgray;
}
</style>
 
<div class="continue">
<span>连续的span</span><span>连续的span</span><span>连续的span</span><span>连续的span</span>
</div>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>

 

技术图片

 

 步骤 2 : 

解决办法

使用float来解决。
float使用完毕之后,记得在下面加上 <div style="clear:both"></div> 用于使得后续的元素,不会和这些span重复在一起

<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
  float:left;
}
</style>
  
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
 
<div style="clear:both"></div>
 
<div>后续的内容</div>

 

技术图片

 

CSS 28 块之间的空格

标签:多个   不同   float   技术   就会   mic   tom   导致   otto   

原文地址:https://www.cnblogs.com/JasperZhao/p/13307716.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!