消除两个inline-block元素之间的间隔
发现问题
两个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为负值来解决
完整代码
<!DOCTYPE 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>
其它的方法
- 子元素的闭合标签紧挨着下个元素的开始标签。
</div><div>
类似这样 - 绝对还有其它的方式,欢迎各位积极留言
消除两个inline-block元素之间的间隔的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 巧用android:divider属性设置LinearLayout中元素之间的间隔
如上图,要想实现3个button线性排列并且使它们的大小相同.间隔相等.而且整体填充满整个linearlayout,我们一般的做法是在每两个button之间放一个固定宽度的view,然后设置butto ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- li元素之间产生间隔
是因为li标签换行导致的 简单的解决办法是将所有的li标签写到一行(不过实际上一般不会这样做) 或者把ul设置font-size为0,但这样ul中的文字就会消失,所以要记得单独给子元素设置font-s ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- css中font-size为0的妙用(消除内联元素间的间隔)
前言 <div> <input type="text"> <input type="button" value="提交& ...
- 相邻元素之间的margin合并问题
任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的 外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距 ...
- css margin-top设置html元素之间的距离
css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
随机推荐
- BZOJ4337 树的同构 (树哈希)(未完成)
样例迷,没过 交了30pts #include <cstdio> #include <iostream> #include <cstring> #include & ...
- Git 06 分支
参考源 https://www.bilibili.com/video/BV1FE411P7B3?spm_id_from=333.999.0.0 版本 本文章基于 Git 2.35.1.2 概述 分支用 ...
- LINUX下基于NVIDIA HPC SDK 的 VASP6.3.x编译安装报错整理
关于gcc 用旧版本安装NVIDIA HPC SDK再编译会报错: "/opt/rh/devtoolset-8/root/usr/include/c++/8/bits/move.h" ...
- Mybatis 插件使用及源码分析
Mybatis 插件 Mybatis插件主要是通过JDK动态代理实现的,插件可以针对接口中的方法进行代理增强,在Mybatis中比较重要的接口如下: Executor :sql执行器,包含多个实现类, ...
- Spring 源码学习笔记10——Spring AOP
Spring 源码学习笔记10--Spring AOP 参考书籍<Spring技术内幕>Spring AOP的实现章节 书有点老,但是里面一些概念还是总结比较到位 源码基于Spring-a ...
- [CF1515F] Phoenix and Earthquake(图论推导,构造)
题面 在紧张又忙碌地准备联合省选时,发生了大地震,把原本要参赛的 n n n 个城市之间的全部 m m m 条道路震垮了,使得原本互相都能到达的这 n n n 个城市无法交通了.现在,需要紧急恢复 n ...
- 在 node 中使用 jquery ajax
对于前端同学来说,ajax 请求应该不会陌生.jquery 真的ajax请求做了封装,可以通过下面的方式发送一个请求并获取相应结果: $.ajax({ url: "https://echo. ...
- 至少要几个砝码,可以称出 1g ~ 40g 重量
请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...
- 第五十六篇:webpack的loader(四) -打包js中的高级语法
好家伙, 1.打包处理js文件中的高级语法 webpack只能打包处理一部分高级的JavaScript 语法.对于那些webpack无法处理的高级js 语法,需要借 助于 babel-loader 进 ...
- Haproxy部署及控制台使用手册
一.介绍 1.简介 HAProxy是一个使用C语言编写开源软件,提供高可用,负载均衡,以及基于TCP(四层)和HTTP(七层)的应用程序代理: HAProxy特别适用于那些负载特大的web站点,这些站 ...