display为inline-block的元素中间有间隙的原因和解决办法

最新推荐文章于 2024-04-26 22:14:41 发布
最新推荐文章于 2024-04-26 22:14:41 发布
阅读量2.9k 收藏 2
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/my466879168/article/details/104807113
版权

display为inline-block的元素在水平方向上之间会有间隙

原因：标签与标签之间使用了空格或者是换行符(空白字符也是字符，样式会影响)
解决办法一： 不使用空白符号，使用注释替代换行、标签的结束标签与开始标签写在一起等（代码的可读性较差）
解决办法二：设置父元素的font-size为0，子元素重新设置字体大小（增加了代码量）
解决办法三：使用负的margin-left（空隙是由上下文的字体大小带来了，每个浏览器的都不一样）
解决办法四：使用letter-spacing属性（字符边距）设为负值
解决办法五：使用word-spacing属性（字符边距）设为负值
解决办法六：设置display为block或者浮动（高度塌陷 需要清除浮动）

香荣如梦
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PostCSS详细介绍
技术探秘者的博客
04-26 630
PostCSS是一个强大的CSS处理工具，它可以用来转换、优化和格式化CSS代码。与传统的预处理器（如Sass和Less）不同，PostCSS不是一种新的CSS语法，而是一个基于JavaScript插件的工具，可以灵活地扩展和定制。本书将详细介绍PostCSS的原理、用法和常见插件，帮助读者快速掌握PostCSS的使用技巧和优化方法。
display:inline-block的原理分析
09-25
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性,大都会对这一属性感觉很迷惑和模糊,本文将详细介绍，需要了解的朋友可以参考下
css解决display:inline-block;产生的缝隙（间隙）的方法
01-19
今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量，因为卡片的个数不固定，需要实时设置其父元素的宽度，就要用到js，所以代码量增加了，也不是最好的选择。看来最好的解决办法就是用到display:inline-block;了，于是缝隙的问题就出现了。代码如下： <!DOCTYPE html> <html> <head> <meta name=viewport content=widt
display:inline-block引发的间隙问题解决办法
YuKing_HONG的博客
11-08 150
在网页布局中我们经常会用到display:inline-block;好处是：能够将块状元素按照内联元素的方式布局，同时能设置宽高。个人感觉很好用，可是用多了慢慢的问题就来了？
display:inline-block间隙产生的原因以及解决方案
yiyueqinghui的博客
06-30 368
解决方案： 1.将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。 <body> <div class="spa">wade</div><div class="spa">james</div><div class="spa">rose</div> </body> 2.给父元素设置font-size:0,给子元素设置需要的font-size值 缺点:是子元素如果里面有文
inline-block布局出现间隙问题
云影杳杳的博客
09-17 567
inline-block引发间隙是包括换行在内的空白符。 问题1：上边距产生1px间距（如图）。 1.完美解决方案： 设置vertical-align:top。（vertical-align这个是设置元素的垂直排列的， 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐；top就是垂直对齐文本的顶部 。） 2.不完美解决方案： 整个div设置height
inline-block布局产生间隙的原因及解决办法（水平、垂直）
热门推荐
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
面试题17：display:inline-block 什么时候会显示间隙？该怎么解决
qq_51066068的博客
04-24 2649
面试官：display:inline-block 什么时候会显示间隙？该怎么解决 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。 display：inline；强制变成行内元素 display：block；强制变成块元素 而display：inline-block；顾名思义就是行内块的意思了，他具.
两个inline-block元素靠近为什么有间隙？
CRMEB小程序商城的博客
03-28 1748
前言 相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧 一、问题描述 废话不多说,上图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
inline-block 的 div 之间的空隙，原因及解决
weixin_70437515的博客
07-06 1178
inline-block 的 div 之间的空隙，原因及解决inline-block布局的元素在编辑器里不在同一行，即存在换行符，这就是著名的inline-block“换行 符/空格间隙问题”。解决办法：1、把img标签的display属性改成block： 2、把div中的字体大小设为0： 3、如果是img，修改img的vertical-align属性： 4、移除标签间的空格 第四个方法明显有点不雅观，而且影响页面代码可观性，不推荐。...
为什么display：inline-block的元素之间会有空格
qq_43654065的博客
04-13 1483
在页面布局中，我们需要将一些元素显示在同一行，其中一种方法就是设置display：inline-block，但是在这些同行显示的inline-block元素之间的会出现空隙。 原因： 元素被当成行内元素排版时，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，空白会被浏览器忽略），HTML代码中的回车换行被转成一个空白符，在字体不为0 的情况下，空白符占据一定的宽度，所以inline-block元素之间就出现了空隙。 解决方法： 删除HTML中
display:inline-block的使用示例
09-25
建立一个宽度很长的一个页面，里面包含许多列，外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，下面与大家分享下display:inline-block的使用示例
CSS属性display:inline-block用法深入理解
09-25
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在...
关于css display: inline block inline-block的区别分析
01-21
display:inline-block 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有：Opera、Safari。 但很遗憾，最...
CSS引入的三种方式
weixin_59272777的博客
04-24 744
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
【React】CSS 局部样式
最新发布
小秀的博客
04-26 182
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 235
【代码】vuetify3.0+tailwindcss+vite最新框架。
css flex布局两个元素水平居中垂直居中
xiaohua616的博客
04-23 411
使用flex布局，让两个元素水平居中垂直居中，具体实现效果如下：
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1211
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
display:inline-block 会有什么问题？如何解决
06-06
使用 display:inline-block 在某些情况下可能会导致元素之间出现间隙或不对齐的问题，这是因为 inline-block 元素的默认对齐方式是基线对齐（baseline alignment），而不是顶部对齐（top alignment）。解决这个问题有以下几种方法： 1. 将父元素的 font-size 设置为 0，然后在内部元素中重新设置一个合适的 font-size。 2. 将内部元素的 vertical-align 属性设置为 top。 3. 将 inline-block 元素之间的空格去掉或者将它们放在同一行内。 以上这些方法都可以解决 inline-block 元素之间出现的间隙或者不对齐的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值