span与span之间的空白怎样解决？

宝塔山  金牌会员 | 2025-3-24 11:57:37 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 969|帖子 969|积分 2907

 
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>标题</title>
  6.     <style>
  7.         div{
  8.             background: yellow;
  9.         }
  10.         span:first-of-type{
  11.             background: red;
  12.         }
  13.         span:last-of-type{
  14.             background: blue;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>
  20.        <span>文本1</span>
  21.        <span>文本2</span>
  22.     </div>
  23. </body>
  24. </html>
复制代码
结果如下所示、存在空白： 

主要原因：
元素被当成行内元素排版的时间，元素之间的空白符（空格、回车换行等）都会被浏览器转换成一个空白字符，这个字符的大小受font-size影响
解决方法1：

不写换行、紧凑编写
  1. <span>文本1</span><span>文本2</span>
复制代码

 解决方法2：
将 span 的父元素的字体大小设置为 0，这样 span 之间的空格也会消散。然后需要在 span 元素上重新设置字体大小为你想要的值。
  1.       div{
  2.             background: yellow;
  3.             font-size: 0px;
  4.         }
  5.         span:first-of-type{
  6.             background: red;
  7.             font-size: 20px;
  8.         }
  9.         span:last-of-type{
  10.             background: blue;
  11.             font-size: 20px;
  12.         }
复制代码
解决方法3：
 将父元素设置为 display: flex;，使子元素（span）紧密排列 ，可以消除子元素之间的空白。
  1.         div{
  2.             background: yellow;
  3.             display: flex;
  4.         }
复制代码
解决方法4： 


  • 将span元素设置为浮动（如float: left;），这样可以使它们紧密排列。但使用浮动布局时需要注意清除浮动，以避免对后续元素产生影响。
  1.      div{
  2.             background: yellow;   
  3.         }
  5.         div::after
  6.         {
  7.           clear:both;
  8.           content:"";
  9.           display: block;
  10.         }
  12.         span:first-of-type{
  13.             background: red;   
  14.              float: left;
  15.         }
  16.         span:last-of-type{
  17.             background: blue;   
  18.               float: left;
  19.         }
复制代码


末了结果：


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

宝塔山

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表