去除两个 inline-block 之间的间距

最新推荐文章于 2021-08-03 21:26:38 发布

原创最新推荐文章于 2021-08-03 21:26:38 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#inline-blo #空白字符 #css #html

前端专栏收录该内容

186 篇文章

订阅专栏

本文探讨了HTML中内联元素之间出现意外间距的问题，并提供了两种解决方案：移除元素间的空白字符及通过调整父元素的字体大小来解决该问题。

首先来看原型代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>desktop demo</title>
  <style>
    .app {
      margin: 50px 0 0 50px;
    }
    .item {
      display: inline-block;
      border: 1px solid black;
    }    
  </style>
</head>
<body>
  <div class="app">
    <div class="item">item1</div>
    <div class="item">item2</div>
  </div>
</body>
</html>

效果图如下：

原因

原因是两个 div 之间有空白字符导致的

解决方案一

去掉两个 <div> 之间的空白间隔，那么就是这样：

<div class="item">item1</div><div class="item">item2</div>

这样可能格式不太好看，也可以这样：

<div class="item">item1</div><div class="item">
item2</div>

总之下一个 div 要紧跟在前一个 div 后面。

解决方案二

设置父元素的 font-size: 0;
那么这个时候，就要单独设置子元素的 font-size 了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>desktop demo</title>
  <style>
    .app {
      margin: 50px 0 0 50px;
      font-size: 0;
    }
    .item {
      display: inline-block;
      border: 1px solid black;
      font-size: 16px;
    }    
  </style>
</head>
<body>
  <div class="app">
    <div class="item">item1</div>
    <div class="item">item2</div>
  </div>
</body>
</html>