display:inline-block去除默认间隙常用方法

已于 2022-01-28 13:46:11 修改
阅读量498 收藏
点赞数
分类专栏： 前端 文章标签： css html css3
于 2022-01-28 13:45:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45719821/article/details/122730227
版权

display:inline-block去除默认间隙最佳方法

方法：使用letter-spacing
HTML代码：
<div class="space">
    <a href="##">AAA</a>
    <a href="##">BBB</a>
    <a href="##">CCC</a>
</div>
CSS代码：
.space {
    letter-spacing: -3px;
}
.space a {
    display: inline-block;
    letter-spacing: 0;
}

该方法可以基本搞定所有浏览器。

gongshaoxu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS属性display:inline-block用法深入理解
09-25
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在...
display:inline-block 去除间隙
weixin_34194702的博客
11-15 96
先写出代码 核心css代码: .sample0{display: inline-block;height: 40px;width: 40px;color: #ffffff;background-color: red; text-align: center;font-size: 26px;} .sample1{display: inline-block...
去除display:inline-block默认间距
weixin_42450794的博客
07-26 1303
今天在写横向轮播的时候，碰到了一个问题，我需要让li横向排列，但是遇到父元素边框的时候，li会自动换行，如下图： 图1： 这是由于float:left造成的，引用官方描述：“浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止” 我们要解决这个问题，就要从根源float:left下手，换成display:inline-block 从我的实际代码的结构分析（结构：...
display:inline-block引发的间隙问题解决办法
weixin_30609331的博客
10-12 296
在网页布局中我们经常会用到display:inline-block;好处是：能够将块状元素按照内联元素的方式布局，同时能设置宽高。个人感觉很好用，可是用多了慢慢的问题就来了？ 1.display:inline-block;在IE6/7中不兼容 解决办法：display:inline-block;*dsiplay:inline;*zoom:1; 2.display:inline-block;会...
去除inline-block元素间间距的N种方法
weixin_30781433的博客
06-14 726
一、现象描述 真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： <input /> <input type="submit" /> 间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题： .space a { display:...
【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1115
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
display:inline-block的使用示例
09-25
建立一个宽度很长的一个页面，里面包含许多列，外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，下面与大家分享下display:inline-block的使用示例
display:inline-block的原理分析
09-25
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性,大都会对这一属性感觉很迷惑和模糊,本文将详细介绍，需要了解的朋友可以参考下
让IE6/IE7支持display:inline-block属性的两种方法
09-25
在IE6和IE7中这个版本的IE流量器中，对display:inline-block属性支持不佳，下面为大家准备两种方法可以解决此问题，让IE6/IE7 支持 display:inline-block 的方法，感兴趣的朋友可以了解下
display:inline-block;会产生间隙，以及解决办法
weixin_42262436的博客
06-05 5865
在前端页面布局中，经常用到display：inline-clock；方便布局，能够将块状元素按照内联元素的方式布局，同时能设置宽高。但是，经常写代码的朋友会发现，会产生间隙，间隙产生的原因是因为，换行或空格会占据一定的位置。所以我们的解决方案如下：1，在html代码中除去当前元素的空格或换行；    但是，这样代码的美观度，可阅读行降低，不可行2，当前元素的父元素中设置font-size:0;  ...
消除display: inline-block 元素间的换行符空格间隙问题。
linglingzi001的博客
12-16 926
消除display: inline-block 元素间的换行符空格间隙的方法 想把一些元素在一行显示，最简单的方法是display:inline-block;变成行内块元素 但是同行显示的inline-block元素之间会有一个换行符，一般占据4px位置(例如Chrome浏览器 字体默认大小16px,行内块元素间隔4px,字体大小越大间隔越大) <!DOCTYPE html> <...
关于display: inline-block 默认空白间距的问题
本杰明的博客
08-06 402
问题描述废话不多说，直接上代码html<div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div>css.box1, .box2, .box3 { width: 20px; height: 20px; background-color: #E11; display: inline-block
分享CSS的display: inline-block默认间距清除方法
weixin_42610731的博客
03-08 657
分享CSS的display: inline-block默认间距清除方法 之所以会有间距是应为inline-bloc他也具备了行内元素的特性导致的两个元素换行会有一定的间距如果把行内元素写在一行就可以清除了。但是这样会导致代码不好阅读。还有一个办法就是清除父元素的文字大小font-size:0px，子元素再单独设置文字打下 演示 css代码 *{ padding: 0; margin: 0;} /* 清除默认样式 */ body{ background: #333333;} .wrappe
去除display:inline-block元素间的间距
juddy123的博客
02-21 490
display:inline-block后元素间的间距 出现原因：换行或回车所致。 解决方法： 方法一：去除html中的空格    或    标签。       惆怅 淡定 热血 或者是： 惆怅</a >淡定</a >热血 或者是： 我是一个span我是一个span我是一个sp
【css】解决两个行内元素或者inline-block元素之间的默认间距
Owen的博客
10-26 1056
1、bug原因 间距是因为元素标签之间的空白符，引起的。 示例如下： 将行内元素标签无空格不换行的写在一起，就不会有这个问题。（解决方案一） 2、解决方案 第一种解决方案不推荐，因为代码看起来混乱。 第二种解决方案：设置父元素的font-size:0。 <style> .box span{background-color: chartreuse;} .box{font-size: 0;} /*父元素字号设置为0*/..
如何取消inline-block元素的空隙？
高先生的猫
08-17 546
最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。 inline-block是什么？ inline-block 即内联块,在css的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。 内联块元素具有了内联元素以及块级元素的特性：（1）元素之间可以水平排列 （2）..
如何去除inline-block的默认间距
weixin_34236497的博客
05-04 112
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>css inline-block间距怎么解决</title> <style type="text/css"> * { ma...
去除inline-block出现间距的几种方法
aoxi9939的博客
11-12 137
display:inline-block，简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会排列在同一行 比如两个input，默认中间会产生一些间距 <div class="box"> <input type="text"> <input type="submit"&...
display: inline-block;
最新发布
05-03
`display: inline-block;`是CSS属性之一，它可以让一个元素同时具有`inline`和`block`两种元素的特性。也就是说，它既可以像`inline`元素一样在同一行显示，又可以像`block`元素一样设置宽高、内边距和外边距等属性...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值