CSS之行内元素排列之间的缝隙问题及解决方案

  • CSS之行内元素排列之间的缝隙问题及解决方案已关闭评论
  • 23 次浏览
  • A+
所属分类:Web前端
摘要

运行结果如图所示:   在代码中,我们用*去除了margin和padding,还是能够看到span元素之间有一个空格,A和B并没有紧挨在一起

 1 <!DOCTYPE html>  2 <html lang="en">  3   <head>  4     <meta charset="UTF-8" />  5     <meta http-equiv="X-UA-Compatible" content="IE=edge" />  6     <meta name="viewport" content="width=device-width, initial-scale=1.0" />  7     <title>Document</title>  8     <style>  9       * { 10         margin: 0; 11         padding: 0; 12       } 13       #wrap { 14         background-color: pink; 15         width: 500px; 16         height: 400px; 17         text-align: center; 18         line-height: 400px; 19       } 20       span { 21         background-color: cornflowerblue; 22       } 23     </style> 24   </head> 25   <body> 26     <div id="wrap"> 27       <span>A</span> 28       <span>B</span> 29     </div> 30   </body> 31 </html>

运行结果如图所示:

CSS之行内元素排列之间的缝隙问题及解决方案

 

 

 在代码中,我们用*去除了margin和padding,还是能够看到span元素之间有一个空格,A和B并没有紧挨在一起

原因:这是因为我们书写代码的时候,在两个span标签之间输入了换行符(回车键)

怎么解决呢?

解决方案如下:

方案一:书写不换行

<div id="wrap">       <span>A</span> <span>B</span>     </div>

缺点:可阅读性大打折扣

 

方案二:给父标签设置一个属性:font-size:0

<style>     #wrap {         font-size: 0;     } </style>

缺点:除此以外,还需要给每一个子节点设置字体大小

 

 

方案三:利用float解决

<style>     span {         float: left;     } </style>

缺点:css的布局有可能会因此而改变,需要重新布局

 

方案四:给父节点设置属性 word-spacing: -4px;

<style>     #wrap {         word-spacing: -4px;     }   </style>

缺点:根据字体的大小,word-spacing 的值应该相应的调整,可能存在兼容性问题

 

方案五:给父节点设置margin-left: -4px;

<style>     #wrap {         word-spacing: -4px;     } </style>

缺点:相比于方案四,这种兼容性较好一点