display:inline-block留白问题

最新推荐文章于 2022-11-24 17:21:21 发布
最新推荐文章于 2022-11-24 17:21:21 发布
阅读量790 收藏
点赞数
分类专栏： 前端 文章标签： 前端bug html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kristal_li/article/details/79547771
版权

今天敲自己的一个小项目，结果发现了以前没注意的小细节，对display:inline-block 和 float:left 的区别算是在这儿深有体会了！


想让两个div分别占一半一行排列，结果加了display：inline-block样式后，发现怎么掉下去了，而且还出现了间隔？？这不是我想要的结果呀......



然后我又换了一种姿势，改成 float:left 这个样式，结果成功了......



于是我十分不解，为什么会出现这种差别呢？

原因是因为（敲黑板划重点）：我的两个div标签之间有换行符！！

那为什么float:left 就可以呢？因为float脱离了文档流，不会被换行符的大小而被挤下去


至于display:inline-block间隔解决办法：

（1）两个div标签紧挨着写，去掉标签之间的换行符

（2）或者把父标签的font-size设置为0

Kristal_li
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
display:inline-block的使用示例
09-25
建立一个宽度很长的一个页面，里面包含许多列，外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，下面与大家分享下display:inline-block的使用示例
display:inline-block的原理分析
09-25
这个属性结合了 `display:inline` 和 `display:block` 的特性，使得元素既能像内联元素一样在一行内排列，又能像块级元素一样拥有宽度、高度以及垂直方向的 margin 和 padding。这对于创建复杂的网页布局和响应式...
CSS中inline-block的留白
程麒阁的博客
07-18 667
inline-block 这是盒模型的一种，它叫行内块元素。和块元素不同的是，块元素独占一行。行内块元素却能适配宽度，使得一行中可以排列多个行内块元素，但是当块元素大小不一样的时候，它们会靠底部对齐。 但是我们可以通过调整vertical-align来解决问题 留白问题 1. inline-block之间的留白 首先我们看这样一段代码： css .block{ } .block1{ display: inline-block; width: 100px; height: 100px; backg
inline-block元素间留白现象探究
weixin_30477293的博客
01-16 95
现象说明 最近在项目发布的时候遇到了一个奇怪的问题，在项目使用gulp打包压缩后发现之前一些行内元素间的空白消失了，导致页面中一些布局出现了问题 正常样式如下： 最开始出现这个问题的时候以为是gulp在压缩css，html出现了什么问题，一直在对比压缩前后对应节点的样式和结构，但却始终没有发现问题。 通关观察元素的盒模型，觉得这段空白实际上是不应该出现的，压缩后异常的样式反而是正常...
DIV中的inline 元素下留白
tel15277169530的博客
11-08 466
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=4925
display:inline-block右侧留白问题
蓝枫秋千的踩坑记录
10-12 841
将一个元素设为行内块元素之后会发现元素的右侧有条白边，效果如下 实现代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...
CSS图片底部留白的解决办法
Delete_89x的博客
10-27 2508
问题描述： div里放了个图片，底部留白，用了padding:0，没去掉，记录一下。 原因分析： img元素默认是inline元素，而inline元素的vertical-align属性的默认值为baseline，也就是文字基线对齐，所以图片底部的留白就是baseline和bottom之间的距离。 解决方案： 使用display: block;将img转换成block元素即可。 重写默认的vertical-align: baseline;，建议设置为vertical-align: middle; 设置图
CSS属性display:inline-block用法深入理解
09-25
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在...
深入display:inline-block
09-25
尽管`display:inline-block`的兼容性和使用上存在一些历史遗留问题，但随着现代浏览器的普及，这些问题已经大大减轻。现在，`display:inline-block`已成为实现灵活布局的常用工具，尤其适用于创建列表、导航菜单、...
display:inline inline-block block
zzzley的博客
11-24 926
display：block，inline，inline-block
Node.js-Karin-基于promise的HTTP客户端支持浏览器和node.js
08-10
Karin - 基于promise的HTTP客户端，支持浏览器和node.js
解决元素display:inline-block间隙问题
sinat_37680470的博客
03-27 528
设置元素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
两个元素为display:inline-block,之前存在的空格解决方法!
oxgos的博客
04-16 1237
今天练习写面包屑导航,遇到的一个问题,和大家分享一下!代码如下: .breakCrumb { list-style: none; } .breakCrumb > li { display: inline-block; } .breakCrumb > li + li:before { content: "/"; color: #ccc; padding: 0 5px;
css块级标签右浮动挤一排解决方法
qq_43378240的博客
12-05 547
首先这个问题是这样的 一个div里面有四个span标签，都设置了display:block;，现在是这样的 右浮动以后 给每个span再添加一个clear:right;就可以恢复正常了
替代盗版软件的免费软件列表
yaoyansi的专栏
05-08 4209
from http://www.neowin.net/forum/index.php?showtopic=320017Items marked in bold are new additions.3D Graphics:3Delight Free - http://www.3delight.com/index.htmAnim8or - http://www.anim8or.com/Aqsis
让你告别盗版软件的清单
yalke
06-03 2051
3D Graphics: 3Delight Free - http://www.3delight.com/index.htm Anim8or - http://www.anim8or.com/ Aqsis - http://www.aqsis.com/ Blender - http://www.blender3d.org/ Houdini (Free Edition) - http://www.s...
用display: inline-block并排显示会多出空白
技术日记
01-18 1190
用display: inline-block这个样式想把多个的内容并排显示，但是出会现空白原来是因为两个display:inline-block之间默认会有空格或者换行符办法就是给父级ul加上font-size：0，消除空白。参考：https://zhidao.baidu.com/question/368122794434033484.html          http://blog.csdn.
div设置display:inline-block属性产生空白间距
泡泡的博客
07-07 1051
使用 inline-block 的时候，ie8、chrome、firefox、opera 以及 safari 浏览器下，两张图片之间有“空白间隙。      平时写代码，为了使代码看上去“层级分明”，通常会在标签结束符后顺手打个回车，而回车会产生回车符，回车符相当于空白符，通常情况下，多个连续的空白符会合并成一个空白符，而产生“空白间隙”的真正原因就是空白符。      去除空白符的存在只需
display: inline-block有白边
最新发布
03-28
display: inline-block是CSS中的一个属性，它可以将元素为内联块级元素。当使用display: inline-block时，元素会像内联元素一样排列在一行上，但是可以设置宽度、高度和边距等属性。 关于display: inline-block有白边的问题，通常是由于元素之间的空白字符（空格、换行符等）导致的。由于inline-block元素会将空白字符也作为内容的一部分进行渲染，所以会出现白边的情况。 解决这个问题的方法有两种： 1. 去除空白字符：可以通过在HTML代码中去除元素之间的空白字符，或者使用注释来占位，从而避免出现白边。 2. 设置父元素的font-size: 0属性：可以通过设置父元素的字体大小为0，来消除空白字符的影响。然后再在子元素中重新设置合适的字体大小。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值