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

来源：互联网发布：英雄传奇挂机软件编辑：程序博客网时间：2024/05/21 06:32

- 首先来看原型代码
- 原因
- 解决方案一
- 解决方案二

首先来看原型代码：

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

效果图：

可以看到这两个方案都能比较好的 hack 掉这个问题。

阅读全文

0 0