解决HTML中换行会出现间隙问题

源代码中连续几个行内元素中的换行在浏览器中会被解释为一个空格,空格和回车都会被显示为一个3px的空格。

例如：

div class="content">
    
        a href="#">
    小米网/a>
    
        a href="#">
    MIUI/a>
    
/div>

效果如图：

（此时小米网和MIUI之间有一个小空格

解决办法：

方法一、

在换行处父级标签加css: { font-size:0} ; 这样换行后就不会有空格出现. css:

.content{
    
    font-size: 0;

}

方法二、

使用浮动： css:

  a{
    
            float: left;

        }

方法三、

采用flex布局，直接消除默认浮动 css:

  .content{
    
         display: flex;

     }
    

效果图：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！