HTML 内联元素之间的空隙问题

程序员文章站 2024-03-23 14:03:40

...

先看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<style>
.box span{
    display: inline-block;
    background-color: aquamarine;
}
</style>
<body>
  <div class="box">
    <span>行内元素1</span>
    <span>行内元素2</span>
    <span>行内元素3</span>
  </div>
  
</body>
</html>

页面效果：
HTML 内联元素之间的空隙问题

可以看到行内元素之间是有小空隙的。

产生的原因：

当浏览器渲染内联元素的时候，元素之间的空白符（空格、回车、换行、等等）都会被浏览器处理，根据white-space的处理方式（默认值是normal，忽略多余的空白，只保留一个空白），将代码中的回车、换行等转换成一个空白符，所以元素之间就出现了空隙。这距离是字体大小的1/3倍。

所以只要解决了换行问题，那么空隙问题也就解决了。

解决方法：

方法一：

父元素设置font-size:0，子元素单独设置字体大小

<style>
.box{
  font-size: 0;
}
.box span{
    display: inline-block;
    background-color: aquamarine;
    font-size: 16px;
}
</style>
<body>
  <div class="box">
    <span>行内元素1</span>
    <span>行内元素2</span>
    <span>行内元素3</span>
  </div>
  
</body>

方法二：

给父元素使用display:flex，或者让内联元素浮动float，这两种方法的本质就是改变子元素的类型，让其不再是内联元素。

方法三：

内联元素标签直接写成一行，缺点：写成一行，代码阅读性变差

 <div class="box">
    <span>行内元素1</span><span>行内元素2</span><span>行内元素3</span>
  </div>

方法四：

改变html的结构

<div class="box">
    <span>行内元素1</span
      ><span>行内元素2</span
        ><span>行内元素3</span>
  </div>

方法五：

用注释符，原理和改变html结构一样

<div class="box">
    <span>行内元素1</span><!-- 消除空格
    --><span>行内元素2</span><!-- 消除空格
    --><span>行内元素3</span>
</div>

方法六：

设置margin负值

<style>
.box span{
    display: inline-block;
    background-color: aquamarine;
    margin-left: -0.333333333em;
}
</style>
<body>
  <div class="box">
    <span>行内元素1</span>
    <span>行内元素2</span>
    <span>行内元素3</span>
  </div>
  
</body>

方法七：

可以通过letter-spacing改变行内元素之间空隙的大小，将letter-spacing设为-0.333333em即可。但是与font-size一样，改变letter-spacing时会改变内部子元素的间隙，需要独自设置子元素的letter-spacing。

<style>
.box{
  letter-spacing: -0.333333333em;
}
.box span{
    display: inline-block;
    background-color: aquamarine;
    letter-spacing: 0;
}
</style>
<body>
  <div class="box">
    <span>行内元素1</span>
    <span>行内元素2</span>
    <span>行内元素3</span>
  </div>
  
</body>

HTML 内联元素之间的空隙问题

产生的原因：

解决方法：

方法一：

方法二：

方法三：

方法四：

方法五：

方法六：

方法七：

HTML 内联元素之间的空隙问题

解决span等内联标签之间的空隙问题

Js 和 JQuery 与HTML元素之间的交互

jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法

父元素相对定位后，子元素在ie下被覆盖的问题！_html/css_WEB-ITnose

HTML5的结构和语义——语义性的内联元素（四）

新人请教样式问题,图片之间的空白条条_html/css_WEB-ITnose

求高手帮我写个列表与列表之间的嵌套问题_html/css_WEB-ITnose

IE6里图片和容器之间的空隙_html/css_WEB-ITnose

移除行块级元素之间的空格（译文）_html/css_WEB-ITnose