CSS 消除 inline-block 元素间的间隙

Nian糕

修改于 2024-03-19 14:20:56

1.3K0

修改于 2024-03-19 14:20:56

关于什么是 inline-block 元素间的间隙，我们先来看个简单的例子

#left {
  background-color: coral;
  display: inline-block;
  width:100px;
  height:100px;
}
#center {
  background-color: lightblue;
  display: inline-block;
  width:100px;
  height:100px;
}
#right {
  background-color: khaki;
  display: inline-block;
  width:100px;
  height:100px;
}

<ul id="main">
  <li id="left">left</li>
  <li id="center">center</li>
  <li id="right">right</li>
</ul>

从上图的运行结果可以看到，添加 display: inline-block; 属性后，水平呈现的元素间产生了空隙，出现这一现象的本质是，HTML 中存在的空白符 (whitespace) ，空白符包括空格，TAB 和回车，解决的办法有：

删掉空格

元素间出现空隙的原因，是因为标签段之间存在空格，只要我们把 HTML 中的空格去掉后，空隙自然就不存在了，下面提供三种去掉空格的方式：

<ul id="main">
  <li id="left">left</li><li id="center">center</li><li id="right">right</li>
</ul>

<ul id="main">
  <li id="left">left
  </li><li id="center">center
  </li><li id="right">right</li>
</ul>

<ul id="main">
  <li id="left">left</li><!--
  --><li id="center">center</li><!--
  --><li id="right">right</li>
</ul>

跳过结束标签

在 HTML5 中该方法不受影响，若是在低版本的 IE 浏览器，可能会出现无法识别的问题，只需要在最后一个列表项上加上闭合标签即可

<ul id="main">
  <li id="left">left
  <li id="center">center
  <li id="right">right
</ul>

使用负边距

需要根据父元素来确定要使用多少个像素值，这个例子中，我们使用 -8px 就能够让三个元素贴在一起了

#left {
  margin-right: -8px;     
}
#center {
  margin-right: -8px;
}

使用负值字符间距

letter-spacing 属性的作用是增加或减少字符间的空白，在这个例子当中，我们在父级添加该属性即可达到消去间隙的作用

#main {
  letter-spacing: -8px;
}

根据运行结果，我们发现，子项继承父级属性之后，文本内容都堆叠在了一起，所以我们还要在子项中添加 letter-spacing: 0; 属性

#left {
  letter-spacing: 0;
}
#center {
  letter-spacing: 0;
}
#right {
  letter-spacing: 0;
}

类似的属性还有 word-spacing，该属性是用来定义元素中字之间插入多少空白符，在父级直接添加该属性即可完成我们想要的效果，子项不需要添加其他属性

#main {
  word-spacing: -8px;
}

将字体大小设置为 0

该方法是在父级元素中添加 font-size: 0; 属性，但是子元素也会继承父级 0 字体大小的属性，无法显示出文本内容

#main {
  font-size: 0;
}

若是想要子元素的文本内容呈现出来，只需在每个子项里设置 font-size 属性即可

#left {
  font-size: 16px;
}
#center {
  font-size: 16px;
}
#right {
  font-size: 16px;
}

使用 Flex 弹性盒

关于 Flex 弹性盒，在该篇博文 CSS 布局_2 Flex弹性盒中有着详细的介绍，在这里只是提供一个解决方法

#main {
  display: flex;
}
#left {
  flex-basis: 100px;
}
#center {
  flex-basis: 100px;   
}
#right {
  flex-basis: 100px;
}

使用浮动

#left {
  float: left;
}
#center {
  float: left;
}
#right {
  float: left;
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017.02.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

css3

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css3

登录后参与评论

0 条评论

热度