如何去除内联元素（inline-block元素）之间的间距

最新推荐文章于 2021-08-03 19:05:05 发布
最新推荐文章于 2021-08-03 19:05:05 发布
阅读量58 收藏
点赞数
原文链接：http://www.cnblogs.com/BrokenIce/p/5065310.html
版权

<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.imooc.com">慕课网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</body>

 

百度 慕课网 33333 44444555555

这个是因为inline元素和inline-block默认都会有间距。可以把它浮动起来，间距就会消失的。float:left;之后间距果然消失了。

下面总结了几条去除inline元素和inline-block元素去除间距的方法：

1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。

2、设置margin-right为负值，但要考虑上下文的字体和文字大小。

3、先设定子元素字体，再设置父元素font-size:0px;chrome中：-webkit-text-size-adjust:none;

4、设置父元素letter-spacing或word-spacing为负值，要考虑字体，子元素有文字也要注意设置letter-spacing或word-spacing的值。

5.float:left;

转载于:https://www.cnblogs.com/BrokenIce/p/5065310.html

weixin_30867015
关注
inline-block什么意思中文_【CSS深入】之对inline-block的理解
weixin_36382907的博客
02-23 4000
display:inline-block属性是一个很神奇且被低估的属性。inline-block即行内块元素，具体而言就是:将对象呈递为内联对象(inline)，但是对象的内容作为块对象呈递(block)，两旁的内联对象会被呈递在同一行内，允许空格。简而言之就是:inline-block的元素既具有block元素可以设置宽高的特性，同时又具有inline元素默认不换行的特性。目前浏览器支...
img图片之间的间隙、inline-block元素之间的间隙
余光的博客
11-08 792
inline-block常见问题场景 img图片与图片之间会有莫名的空隙 同一行的元素之间会有空隙 inline-block的诞生原因 在CSS中： 块级对象元素会单独占一行显示，多个block元素会各自新起一行，并且可以设置width,height属性； 内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到行排满，对inline元素设置width,height属性无效...
如何去除两个span之间的空隙
Alive_tree的博客
04-23 2175
如何去除两个span之间的空隙 我们在对span进行 display=inline-block处理的时候会发现span之间会有一点空隙 margin会有值 去掉方法 1、设置span的margin 为-x px 这样间距为负再移回去，这样视觉上会没有间隙。 span{ margin-left:-3px; } 2、在父级设置字体的fontSize为0 html： <div clas...
inline-block元素与父div底边之间的间距问题
mmjinglin的博客
04-10 1223
在一些情况下，inline-block的元素距离父div底边会有距离，让我们看一下例子： 例子1，两个inline-block元素，设定了固定的宽高，第一个有文字，第二个没有文字： <!--css--> .div1{ background-color: red; color: white; } .div2{ background-color: blue; ...
css调整元素间距,inline-block带来的元素间距问题解决
weixin_39907596的博客
08-03 788
display:inline-block：众前端们都知道，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。有如下代码CSS Code复制内容到剪贴板.ac-btna{background:url(../img/action.png)no-repeat;width:73px;height:25px;display:inline-block;}.ac-btn.btn-save{back...
内联块inline-block块下沉、多余的水平间隙垂直间隙的问题
小菜鸡程序媛的挣扎史
08-01 931
把导航设置为inline-block以后总是会多出4px的垂直间隙 序 display有几种属性： inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置； block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义； 为了弥补inline和block的不足...
如何去除掉inline-block元素之间的默认间距
a240149010的博客
09-23 163
前几天写一个页面 div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li> 　　<li></li> 　　<li></li> </ul> 　发现宽度为900px的div...
内联元素inline-block空隙问题
weixin_30678821的博客
06-02 97
1.产生的原因 当我们使用"display:inline-block"把块集元素转换为内联元素时，每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。 　　元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来...
去除内联元素（inline-block元素）之间的间距
dgszgjew11263的博客
12-15 129
说这个是因为inline元素和inline-block默认都会有间距,怎么去掉默认距离呢？ 1：用浮动 float:left; 2：先设定子元素字体，再设置父元素font-size:0px（这个方法在不能用浮动的时候用 用过 挺管用的） 3：相关标签之间的 闭合标签不要换行 （这个维护起来比较麻烦，程序猿可能不懂 之间换行之类的） 4：设置margin-right为负值，但要...
Firefox Bug: inline/inline-block的间隙采用代码缩进可解决
09-25
在网页布局中，`inline-block` 是一种常用的CSS布局方式，它允许元素保持内联特性的同时，具有块级元素的宽度和高度可调整性。然而，`inline-block` 在不同浏览器间存在兼容性问题，特别是在Firefox中有一个知名的...
浅谈inline-block及解决空白间距
11-30
在网页布局中，`display: inline-block` 是一个非常有用的 CSS 属性，它允许元素表现得像内联元素（inline）一样，同时可以设置宽高（block-like）。然而，在使用 `display: inline-block` 时，经常会遇到一个问题，...
inline-block元素的4px空白间距解决方案
09-25
在CSS布局中，`inline-block`元素是一种常用的布局方式，它可以将元素表现为内联元素的同时，保持块级元素的特性，如设置宽高。然而，使用`inline-block`时会遇到一个问题，即元素之间会自动产生一个大约4像素（在...
CSS属性display:inline-block用法深入理解
12-13
- `display:inline-block`在处理内联元素时，会保留元素间的空白字符，可能导致元素之间的额外间距。可以通过调整HTML结构或使用CSS控制（如`font-size:0`或`white-space nowrap`）来消除这些空格。 - 由于`display:...
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功
10-10
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功功率可达10kW或10kVar，甚至更高
SpringBoot+Vue工厂生产设备维护管理系统答辩PPT.ppt
10-10
计算机毕业设计答辩PPT
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
最新发布
10-10
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
CCS软件之工程模板的创建
10-10
工程模板创建的基础文件
CSS布局解析：块状元素、内联元素与inline-block
"本文主要探讨了CSS中的块状元素与内联元素，以及它们之间的区别、联系，并介绍了通过CSS可以转换元素特性的`inline-block`。同时，文章列举了常见的块元素和内联元素示例，帮助理解这两种元素类型在网页布局中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值