解决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;
     }

效果图:

在这里插入图片描述

posted @   Tricia11  阅读(64)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示