多个div使用display:inline-block时候div之间有间隔_div display: inline-block; 有间距_是！豆哈哈的博客

相关文章推荐

面冷心慈的树叶 · Configure audit ...· 1 年前 ·

近视的野马 · Python 函数 | 菜鸟教程· 2 年前 ·

虚心的灯泡 · 像VBA一样，逐行执行Python代码？· 2 年前 ·

月球上的南瓜 · 在Windows ...· 2 年前 ·

昨天我的后端男朋友问了我这么一个问题，给俩div设置完display: inline-block;
为啥会出现间隙，前提是已经设置过margin: 0; padding: 0了，作为前端的我之前还没遇到过这样的问题，一下子给我整不会了。如图;
在这里插入图片描述
于是今天百度一波……收集到以下解决方案↓

++++解决方法1：
在父系上加font-size:0；然后，在子div上加一个font-size设置你需要的字体大小
原因：
display:inline-block表示行内块元素，后面自带空格字符（盒子的
之间的空格和回车折算成了字符），所以有空隙，如果想去掉空隙，在父系上加font-size:0；但是这样的话字体就看不见了，所以还需要在子div上加一个font-size
学习文章链接：
https://www.cnblogs.com/zmdComeOn/archive/2019/06/26/11089610.html
++++解决方法2：
给父元素加上 display: flex;
学习文章链接：
https://blog.csdn.net/qq_43173415/article/details/107335356

效果如下：
在这里插入图片描述

昨天我的后端男朋友问了我这么一个问题，给俩div设置完display: inline-block;为啥会出现间隙，前提是已经设置过margin: 0; padding: 0了，作为前端的我之前还没遇到过这样的问题，一下子给我整不会了。如图;于是今天百度一波……收集到以下解决方案↓++++解决方法1：在父系上加font-size:0；然后，在子div上加一个font-size设置你需要的字体大小原因：display:inline-block表示行内块元素，后面自带空格字符（盒子的之间的空与其他行内元素共享一行；不能修改width、height属性，大小由内容撑开； padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效; 常见的有：<span> <a> <strong> <em>... 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用 padding，margin的left和right产生边距效果，但是top和bottom就不行. bl... 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。 2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它...

使用 display : inline - block 产生的问题给两个 div 设置了 display : inline - block ，也控制了两个 div 的长度，但两个 div 不在同一行案例： --- div 部分--- < div id=" div 0"> < div id=" div 1"></ div >

两个元素的 display 设置成 inline - block 会出现中间有间隔的问题，部分html如下< div class="content-wrapper"> < div class="avatar">  实现多个 div 并排。需要使内层 div 宽度小于外层 div ，因为 div 默认独占一行，因此可设置浮动。 1、外层 div 宽度设置为100%； 2、内层 div 设置宽度小于外层 div ，并设置浮动：float：left； 3、增加 div 间距，margin-left：20px; < div class="main-content:> < div class ="main"&g...

第二步，输出async1 start 在执行async1这个函数的时候，async表达式定义的函数也是立即执行在前面我们说过看到带有async关键字函数，不用慌，它仅仅是把return值包装成了promise,所以就很普通的打印 console.log( 'async1 start' ) 第三步，输出async2 async2是async定义的函数，输出async2并返回promise对象， await后，中断async函数，先执行async外的同步代码，目前就直接打印 console.log('async2') 第四步，输出promise1 执行new Promise()，Promise构造函数是直接调用的同步代码，所以就打印console.log( 'promise1' ) 第五步，输出script end 因为上一步先打印了promise1,然后执行到resolve的时候，然后跳出promise继续向下执行，所以就打印console.log( 'script end' ) 第六步，输出async1 end 因为await定义的这个promise已经执行完，并且返回结果，所以继续执行async1函数后的任务，就是console.log(‘async1 end’) 第七步，输出promise2 因为前面的new promise放进resolve回调，这个resolve被放到调用栈执行,所以就打印console.log('promise') 第八步，输出setTimerout 最后执行定时器（宏任务）setTimeout,打印console.log( 'setTimerout' ) 什么是less?less转css的插件以及编译工具 Curtain.728: 插件用了几天突然不能编译了怎么办 less除法运算问题的解决办法跟我去海边: less除法运算问题的解决办法学习越学越多: 感谢感谢，差点被这个气死 less除法运算问题的解决办法 Java嗷嗷嗷: