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

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

Never Yu

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

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： inline-blo 空白字符 css html

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

本文链接：https://blog.youkuaiyun.com/csdn_yudong/article/details/78511817

前端专栏收录该内容

186 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先来看原型代码：

<!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>