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

最新推荐文章于 2024-09-09 21:34:46 发布
最新推荐文章于 2024-09-09 21:34:46 发布
阅读量3k 收藏 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或者浮动（高度塌陷 需要清除浮动）

香荣如梦
关注
display:inline-block 产生空隙问题
qq_24270109的博客
01-27 294
Display:inline-block 产生空隙问题 1.产生原因:元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font...
CSS系列——行内块inline-block元素之间出现空白间隙原因及解决办法
bidang3275的博客
11-29 1076
行内块inline-block元素之间出现空白间隙原因及解决办法基本布局产生间隙的原因解决方法【7个】方法1：行内元素写在一行方法2：行内元素之间加上空白注释方法3：父元素的 `font-size` 设置为 `0`，子元素单独设置 `font-size`方法7：给父元素设置【负字符间距】 或 【负单词间距】，行内子元素再设置为 `0` 基本布局 <div class="container clearfix"> <div class="item item1"></d
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
本篇文章主要介绍了css解决display:inline-block;产生的缝隙（间隙）的方法，具有一定的参考价值，有需要的可以了解一下。
如何解决 inline & inline-block 的空白间隙问题？
最新发布
qq_63447955的博客
09-09 1206
* 设置单词间距，这个值要大于由HTML空白字符可能产生的间隙 *//* 为需要显示文字的子元素单独设置字体大小 *//* 为父元素添加边框以便于观察（可选） *//* 例如，我们将单词间距设置为10像素 *//* 为子元素之间添加一些间距（可选） *//* 为父元素添加一些内边距（可选） *//* 为父元素添加边框以便于观察 *//* 消除子元素之间的空白间隙 *//* 子元素垂直居中（可选） *//* 子元素水平居中（可选） *//* 设置一个合适的字体大小 *//* 设置字符间距为2像素 */
display:inline-block元素之间空隙的产生原因和解决办法
热门推荐
qq_32614411的博客
08-30 3万+
display:inline-block是一种布局方法，它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-bl...
inline-block布局产生间隙的原因及解决办法（水平、垂直）
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
去除inline-block元素间间距的N种方法
weixin_30781433的博客
06-14 758
一、现象描述 真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题： .space a { display:...
inline-block布局出现间隙问题
云影杳杳的博客
09-17 623
inline-block引发间隙是包括换行在内的空白符。 问题1：上边距产生1px间距（如图）。 1.完美解决方案： 设置vertical-align:top。（vertical-align这个是设置元素的垂直排列的， 用来定义行内元素的基线相对于该元素所在行的基线的垂直对齐；top就是垂直对齐文本的顶部 。） 2.不完美解决方案： 整个div设置height
display:inline-block的使用示例
09-25
总结来说，`display:inline-block`是解决浮动元素换行问题的有效方法，配合`white-space:nowrap`和`font-size:0`可以实现紧密排列的多列布局。这种布局技术在网页设计中有着广泛的应用，尤其是在创建响应式布局和...
css之display属性之inline-block布局实现详解
11-21
总之，`display`属性的`inline`、`block`和`inline-block`提供了丰富的布局选择，根据设计需求灵活运用这些属性，可以创建出各种复杂的页面布局。理解和掌握这些基本概念对于前端开发者来说至关重要。
详解CSS 去掉inline-block元素间隙的几种方法
12-13
最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，...
解决元素display:inline-block间隙问题
sinat_37680470的博客
03-27 570
设置元素display：inline-block的时候，元素之间会有间隙，并且父级的高度不是右自己撑开的。一个很简单的解决方案就是给父级设置font-size：0；//html &lt;div class="main"&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt
两个inline-block元素靠近为什么有间隙？
CRMEB小程序商城的博客
03-28 1841
前言 相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧 一、问题描述 废话不多说,上图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
display:inline-block的间隙问题和解决办法
weixin_30898109的博客
09-27 349
1、display:inline-block在水平方向的间隙； 代码如下： <style type="text/css"> *{margin:0; padding:0;} .test{width:600px; border:1px blue solid;} .test div{width:100px; height:100px; displ...
面试题17：display:inline-block 什么时候会显示间隙？该怎么解决
qq_51066068的博客
04-24 2856
面试官：display:inline-block 什么时候会显示间隙？该怎么解决 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。 display：inline；强制变成行内元素 display：block；强制变成块元素 而display：inline-block；顾名思义就是行内块的意思了，他具.
inline-block左右间隙问题
weixin_44574502的博客
02-22 141
<div></div> // <- 祸根：这里的空格被识别了 <div></div> .inline-block { font-size: 0; word-spacing: 0; display: table; }
inline-block布局产生间隙
qq_41898220的博客
05-31 400
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。 .top>.logo>.nav { float: right; line-height: 106px; } .top
使用display: inline-block的间隙问题
死肥仔Meiko
08-01 668
解决display: inline-block 下 元素之间有间距的问题 在某种情况下 , 不想使用浮动方法 , 又要考虑兼容的情况下 。通常我们会使用 display: inline-block 来使元素处于并排显示, 会遇上这样的情况   * { padding: 0px; margin: 0px; } body { padding-top: 100px; ...
[CSS] inline-block间隙
Agumr的博客
11-13 285
inline-block间隙 在给 li 设置inline-block 属性的时候，发现在li元素之间有一道间隙 <style type="text/css"> body,div,h1,ul,li{margin:0; padding:0;} ul,li{list-style:none;} .nav a{background: red;color:#fff;padding: 5px 10px;} .nav ul li{display:inline-block;} &
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值