display:inline-block的间隙问题和解决办法

最新推荐文章于 2022-10-07 12:09:00 发布
最新推荐文章于 2022-10-07 12:09:00 发布
阅读量337 收藏
点赞数
原文链接：http://www.cnblogs.com/learnings/p/5912923.html
版权

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; display:inline-block;background:blue;} 
    </style>
</head>
<body>
<div class="test">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>

效果如下：

四个div之间有小间距，解决办法：让水平间隙消失就是在父级上加font-size:0;让垂直间隙消失，就在子元素上加vertical-align:bottom;就不贴代码了，
如果子标签内加上任意文字，则display:inline-block元素不会生成垂直方向有空白！ 下面是解决好的效果：

转载于:https://www.cnblogs.com/learnings/p/5912923.html

weixin_30898109
关注
【CSS基础—No.03】消除display: inline-block产生的间隙
Chailo的博客
11-21 1263
如果你举例子尝试的话会发现一个问题，display: inline-block元素垂直和水平方向也会产生一个间隙，而这个间隙在实际开发中会让我们的页面不那么严谨。
CSS display:inline-block的边距问题及解决方法
weixin_43744709的博客
05-22 1359
将一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使使用（*{margin:0;padding:0;}）也是无法消除 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
本篇文章主要介绍了css解决display:inline-block;产生的缝隙（间隙）的方法，具有一定的参考价值，有需要的可以了解一下。
display:inline-block 去除间隙
weixin_34194702的博客
11-15 107
先写出代码 核心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；后会有间隙的问题
沫沫酱
03-12 271
元素使用display: inline-block;后，总是和其他元素出现间隙，其实是fontsize惹的祸，将父元素的font-size:0px,就可以解决
display:inline-block元素之间空隙的产生原因和解决办法
热门推荐
qq_32614411的博客
08-30 3万+
display:inline-block是一种布局方法，它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。 在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元素设置display属性为inline-bl...
display为inline-block的元素中间有间隙的原因和解决办法
my466879168的博客
03-11 3073
display为inline-block的元素在水平方向上之间会有间隙 原因：标签与标签之间使用了空格或者是换行符(空白字符也是字符，样式会影响) 解决办法一： 不使用空白符号，使用注释替代换行、标签的结束标签与开始标签写在一起等（代码的可读性较差） 解决办法二：设置父元素的font-size为0，子元素重新设置字体大小（增加了代码量） 解决办法三：使用负的margin-left（空隙是由上下文...
display:inline-block的使用示例
09-25
总结来说，`display:inline-block`是解决浮动元素换行问题的有效方法，配合`white-space:nowrap`和`font-size:0`可以实现紧密排列的多列布局。这种布局技术在网页设计中有着广泛的应用，尤其是在创建响应式布局和...
display:inline-block元素之间产生空隙
pinkowonote的博客
08-03 143
https://blog.csdn.net/qq_32614411/article/details/82223624 @media screen and (min-width: 768px) { *, *::before, *::after { margin: 0px; padding: 0px; } .container { width: 750px; background-color: aqua;
【前端】display:inline-block中间的间隙
萌狼蓝天の技术栈
10-07 387
父元素宽度800px 两个并列子元素宽度设为50%，并且使用了display:inline-block 结果一运行，两个元素不在同一行？ 我查审元素，两个子元素div的宽度都是400，也没有边框，边距的影响。400+400=800，看着没问题吧 后来经过百度发现，原来是两个子元素标签之间存在空白字符的影响。 比如下面这两个子元素 上一个div结束标签和下一个div开始标签，没在一行吧，那中间是...
如何解决inline-block元素的间距问题？
qq_25602411的博客
05-23 1215
inline-block元素之间会默认大概有4px的间距，解决方案大概有4种，最根本原因由于inline-block元素与inline-block元素之间有文本的原因
inline-block布局产生间隙的原因及解决办法（水平、垂直）
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
使用display: inline-block的间隙问题
死肥仔Meiko
08-01 649
解决display: inline-block 下 元素之间有间距的问题 在某种情况下 , 不想使用浮动方法 , 又要考虑兼容的情况下 。通常我们会使用 display: inline-block 来使元素处于并排显示, 会遇上这样的情况   * { padding: 0px; margin: 0px; } body { padding-top: 100px; ...
inline-block之间间隙问题
HaiMianDanKe的博客
01-11 537
有时候标签设置了：display:inline-block时，标签之间会产生莫名的间隙，即使设置了margin:0，间隙仍然存在。例如html代码：<ul> <li><a href="#">11</a></li> <li><a href="#">22</a></li> <li><a href="#">33</a></li> <li><a href="#">44</a>
解决元素display:inline-block间隙问题
sinat_37680470的博客
03-27 556
设置元素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布局产生间隙
qq_41898220的博客
05-31 386
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。 .top>.logo>.nav { float: right; line-height: 106px; } .top
display:inline-block间隙产生的原因以及解决方案
weixin_30608503的博客
03-08 116
display-inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。那么如何解决呢？ 方案一：将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。 方案二：给父元素设置font-size:0,缺点是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-...
display: inline-block 布局
weixin_30868855的博客
07-10 44
三个元素display: inline-block; 布局 ，其中一个元素中存在其他元素也用了display: inline-block; 无法垂直居中，将这个元素设置为display: inline; 转载于:https://www.cnblogs.com/Running00/p/11163751.html...
怎么解决 display:inline-block 之间显示间隙问题？
liayn523的博客
08-04 725
1.移除空格（div之间回车）； 2.使用margin负值； 3.使用font-size：0； 4.letter-spacing; 5.word-spacing;
display:inline-block 会有什么问题？如何解决
最新发布
06-06
使用 display:inline-block 在某些情况下可能会导致元素之间出现间隙或不对齐的问题，这是因为 inline-block 元素的默认对齐方式是基线对齐（baseline alignment），而不是顶部对齐（top alignment）。解决这个问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值