消除两个inline-block元素之间的间隔

u012804784

于 2022-10-20 01:05:30 发布

阅读量94

点赞数

分类专栏： android 文章标签：计算机

本文链接：https://blog.csdn.net/u012804784/article/details/127419053

版权

android 专栏收录该内容

316 篇文章 13 订阅

订阅专栏

本文介绍了如何解决CSS中inline-block元素之间的间隔问题，提供了四种方法：1)设置父元素字体大小为0；2)将父元素转换为flex布局；3)将子元素转换为table-cell；4)使用word-spacing属性。详细代码示例和解析帮助理解每种方法的实现。

摘要由CSDN通过智能技术生成

🚀 优质资源分享 🚀

学习路线指引（点击解锁）	知识定位	人群定位
🧡 Python实战微信订餐小程序 🧡	进阶级	本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。
💛Python量化交易实战💛	入门级	手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

发现问题

两个inline-block元素之间的间隔。如下图

期望

消除两个inline-block元素之间的间隔。

解决方法

1、父元素字体大小设置为0

间隔的形成是非元素标签形成的

/** 方案1，父元素字体大小设置为0 */
.wrap-font {
        font-size: 0;
        /*解决谷歌浏览下最小字体的限制*/
        -webkit-text-size-adjust: none;
}

.wrap-font div {
        font-size: 14px;
}

2、父元素转化为flex元素

/** 方案2，父元素转化为 flex */
.wrap-flex {
        display: flex;
}

推荐此方法

3、子元素转化为table-cell

/** 方案3，子元素转化为 table-cell */
.wrap-table>div {
        display: table-cell;
}

4、

/** 方案4，使用word-spacing */
.wrap-letter-spacing {
        word-spacing: -1em;
}

.wrap-letter-spacing>div {
        word-spacing: 0;
        /*消除父元素底部的间隔*/
        vertical-align: bottom;
}

同样的原理，也可以设置子元素的margin-left为负值来解决

完整代码

html>
<html>

<head>
	<meta charset="utf-8">
	<title>解决inline-block/inline-flex中间的间隔title>
	<style>
 .wrap {
 width: 400px;
 background-color: #dcd9d0;
 }

 .wrap-item {
 display: inline-block;
 width: 100px;
 height: 100px;
 }

 /** 方案1，父元素字体大小设置为0 */
 .wrap-font {
 font-size: 0;
 /*解决谷歌浏览下最小字体的限制*/
 -webkit-text-size-adjust: none;
 }

 .wrap-font div {
 font-size: 14px;
 }

 /** 方案2，父元素转化为 flex */
 .wrap-flex {
 display: flex;
 }

 /** 方案3，子元素转化为 table-cell */
 .wrap-table>div {
 display: table-cell;
 }

 /** 方案4，使用word-spacing */
 .wrap-letter-spacing {
 word-spacing: -1em;
 }

 .wrap-letter-spacing>div {
 word-spacing: 0;
 /*消除父元素底部的间隔*/
 vertical-align: bottom;
 }
 style>
head>

<body>
	<div class="wrap wrap-flex">
		<div class="wrap-item" style="background-color: #238bbc;">div>
		<div class="wrap-item" style="background-color: #1db561;">div>
		<div class="wrap-item" style="background-color: #785696;">div>
	div>
body>

html>