处理行内元素行内块元素中间空隙

天宫之皓月

已于 2022-09-24 16:07:32 修改

阅读量2.5k

点赞数 9

分类专栏： html 文章标签： html css

于 2022-05-04 21:15:21 首次发布

本文链接：https://blog.csdn.net/micr_cai/article/details/124577530

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

方案六：letter-spacing设置为负值;

方案七：给行内块元素添加float属性（浮动）

会出现间隙的原因，其实是行内元素、行内块元素标签之间的换行或其他格式不可见字符带来的影响。

案例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        span {
            font-size: 10px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <span>111</span>
    <span>222</span>
    <span>333</span>
</body>
</html>

效果：

目的效果：

这个距离是父级字体大小的1/3

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 100px;
        }
        span {
            font-size: 20px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <span>111</span>
    <span>222</span>
    <span>333</span>
</body>
</html>

方案一：源码中直接就写成一行

<div class = "box">
    <span>你好</span><span>你好</span><span>你好</span>
  </div>

方案二：改变HTML结构 (推荐)

<div class = "box">
    <span>你好</span
      ><span>你好</span
        ><span>你好</span>
  </div>

方案三：用注释 (推荐)

<div class = "box">
    <span>你好</span><!-- 消除空格 
    --><span>你好</span><!-- 消除空格 
    --><span>你好</span>
  </div>

方案四：margin设为负值;

<style>
    .box span{
      margin-left:-0.33333333em;
    }
</style>

<body>
  <div class = "box">
    <span>你好</span>
    <span>你好</span>
    <span>你好</span>
  </div>
</body>

方案五：font-size: 0

给父元素设置 font-size : 0 后，需要重新给子元素设置字号

<style>
    .box{
      font-size:0;
    }
    .box>span{
      font-size:16px;
    }
  </style>

<body>
  <div class = "box">
    <span>你好</span>
    <span>你好</span>
    <span>你好</span>
  </div>
</body>

这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在

方案六：letter-spacing设置为负值;

将letter-spacing设为-0.333333em即可。但是与font-size一样，改变letter-spacing时会改变内部子元素的间隙，需要在子元素内手动进行矫正。

<style>
    .box{
      letter-spacing: -0.333333em;
    }
    .box>span{
      letter-spacing: 0;
    }
  </style>

<body>
  <div class = "box">
    <span>你好</span>
    <span>你好</span>
    <span>你好</span>
  </div>
</body>