解决display:inline-block 出现的间隙

最新推荐文章于 2022-04-24 09:50:06 发布
最新推荐文章于 2022-04-24 09:50:06 发布
阅读量7.5k 收藏 2
点赞数
分类专栏： web前端 前端－css样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abeetle/article/details/39928487
版权

使用inline-block出现的间隙的解决方法：

父加上样式　font-size:0;　是为的是去掉多余的空白

子元素加上应有的字体样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
未使用font-size:0方法的
<div style="width:120px; background:#ECEAEA; padding:10px;text-align:center;">
	<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;">1</span>
    <span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;">2</span>
</div>
使用font-size:0方法后的效果
<div style="font-size:0; width:120px; background:#ECEAEA; padding:10px;text-align:center;">
	<span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#F78789; vertical-align:middle; text-align:center;">1</span>
    <span style="display:inline-block;font-size:12px;width:50px; height:50px; line-height:50px; background:#35B86D;vertical-align:middle; text-align:center;">2</span>
</div>
</body>
</html>

执行后的效果


雨里去
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display:inline-block 产生空隙问题
qq_24270109的博客
01-27 254
Display:inline-block 产生空隙问题 1.产生原因:元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font...
display:inline-block的使用示例
09-25
然而，`display:inline-block`会保留元素之间的空白字符，导致元素之间出现间距。为消除这个间距，一种常见的方法是将父元素的`font-size`设为0，因为这些间距是由字体的大小决定的。在示例代码中，我们可以添加`...
面试题17：display:inline-block 什么时候会显示间隙？该怎么解决
qq_51066068的博客
04-24 2725
面试官：display:inline-block 什么时候会显示间隙？该怎么解决 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-block，但是你会发现这些同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。 display：inline；强制变成行内元素 display：block；强制变成块元素 而display：inline-block；顾名思义就是行内块的意思了，他具.
两个inline-block元素靠近为什么有间隙？
CRMEB小程序商城的博客
03-28 1774
前言 相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧 一、问题描述 废话不多说,上图 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
html中inline-block出现缝隙间距的解决方案
weixin_30482181的博客
02-17 155
不同浏览器之间的间隔距离是不一样的，亲测有下面4中情况浏览器缝隙大小(PX)备注Firefox4Chrome5IE4qq，360，搜狗等浏览器8html显示：出现这个问题的原因就是：1.代码部分标签之间出现空格像这样：<div> <a href=""></a><!-- 这些都是缝隙 ...
inline-block布局产生间隙的原因及解决办法（水平、垂直）
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
display:inline-block元素之间空隙的产生原因和解决办法
热门推荐
qq_32614411的博客
08-30 3万+
display:inline-block是一种布局方法，它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-bl...
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
然而，使用`display: inline-block` 时，元素之间往往会出现一些意想不到的缝隙，这通常是由于空白字符、换行或缩进所引起的。在本文中，我们将探讨如何解决这个问题。 首先，缝隙的产生是因为HTML源代码中的空白...
css之display属性之inline-block布局实现详解
11-21
- **间隙问题**：在`inline-block`元素之间有时会出现4像素的间隙，这是由于换行产生的空白字符导致的。 - **去除空隙的方法**： - 对父元素设置`font-size: 0`，这样空白字符的大小也会变为0，消除间隙。 - ...
css几种解决inline-block间隙的方案(整理)
09-27
然而，使用`inline-block`时，一个常见的问题是元素之间会出现间隙，这可能会对布局产生影响。本文将探讨几种解决`inline-block`间隙的方案。 首先，理解为什么会出现这个间隙是非常重要的。`inline-block`元素间的...
display:inline-block引发的间隙问题解决办法
weixin_30609331的博客
10-12 303
在网页布局中我们经常会用到display:inline-block;好处是：能够将块状元素按照内联元素的方式布局，同时能设置宽高。个人感觉很好用，可是用多了慢慢的问题就来了？ 1.display:inline-block;在IE6/7中不兼容 解决办法：display:inline-block;*dsiplay:inline;*zoom:1; 2.display:inline-block;会...
display:inline-block 什么时候会显示间隙
LuckXinXin的博客
03-01 643
相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距 非 inline-block 水平元素设置为 inline-block 也会有水平间距 可以借助 vertical-align:top; 消除垂直间隙 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙 把 li 标签写到同一行可以消除垂直间隙，但代码可读性差 ...
display:inline-block;会产生间隙，以及解决办法
weixin_42262436的博客
06-05 5898
在前端页面布局中，经常用到display：inline-clock；方便布局，能够将块状元素按照内联元素的方式布局，同时能设置宽高。但是，经常写代码的朋友会发现，会产生间隙，间隙产生的原因是因为，换行或空格会占据一定的位置。所以我们的解决方案如下：1，在html代码中除去当前元素的空格或换行；    但是，这样代码的美观度，可阅读行降低，不可行2，当前元素的父元素中设置font-size:0;  ...
CSS问题--display:inline-block 什么时候会显示缝隙
CrystalLee
07-01 1449
问题： display:inline-block 什么时候会显示缝隙 解答： 详见下面的扩展问题 扩展问题： 缝隙产生的原因及怎么解决 解答： 产生的原因： 元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素f
display:inline-block 什么时候不会显示间隙？
LuckXinXin的博客
05-12 836
移除空格 使用margin负值 使用font-size:0 letter-spacing word-spacing
display: inline-block存在的间隙问题和解决方法
家有佳欣宝贝的博客
01-17 820
大家可能在ul搭配li里面遇到过这样的问题，如果想让li全部一行排列，一种方法是浮动，另一种是给li添加display: inline-block但是这个东西存在间隙 问题如图： 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&am
[css] 请问display:inline-block在什么时候会显示间隙？
歌谣的博客
02-21 586
[css] 请问display:inline-block在什么时候会显示间隙？ 解决方法 1、全局font-size设置成0 2、 取消两个div之间的空格 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
display:inline-block的间隙问题和解决办法
weixin_30898109的博客
09-27 333
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...
display:inline-block什么时候会出现间隙
最新发布
05-17
在使用display:inline-block时，会出现间隙的原因有以下两点： 1. HTML代码中的空格、换行符或注释等会导致元素之间产生空隙。 2. inline-block元素默认基线对齐，如果元素中有图片或者文字，那么基线会导致元素...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值