inline-block的块下沉，间距问题，问题原理

最新推荐文章于 2019-08-01 09:21:01 发布
原创 最新推荐文章于 2019-08-01 09:21:01 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文主要探讨了使用inline-block布局时遇到的两个常见问题：块下沉及间距问题，并提供了具体的解决方案。对于块下沉问题，可以通过调整vertical-align属性来解决；而对于间距问题，则可以通过将父元素的font-size设置为0来消除不必要的间隙。

inline-block

内联块元素：可以拥有宽，高的内联元素

1、块下沉

排列多个元素在一行时，也就是多个内联块元素并列时，会导致块下沉

解决方案：与baseline有关 ，设置vertical-align：top/middle/bottom

2、间距问题

有空隙

解决方案：父元素中设置font-size：0

原理： 设计者在设计这个inline-block时，是为了放置文字而设置的

inline-block之后意外发现块下沉
qq_27545151的专栏
09-20 8628
前几天面试某M公司的前端开发，被虐了一通之后，发现自己的前端学的真是一塌糊涂，总结一下各个问题，发现前端之路漫漫，还需潜心修行。 在网上查找关于浏览器兼容的问题，几乎每一篇都提到了inline-block的问题。自己动手测试了一下，发现了一个意外的现象——当设置块元素display:inline-block之后，如果某些块写了文字，某些不写，写了文字的就会下沉，但如果都不写或者都写了，就不会出现
html兼容ie7ie8,解决IE6、IE7、IE8样式不兼容问题
weixin_34873798的博客
06-27 1230
这里和大家探讨一下解决IE6、IE7、IE8 DIV错位问题，如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，非常方便。IE6里DIV错位的问题采用”FLOAT：LEFT“的DIV在IE8、IE7、都没问题，IE6下却向下移动，出现空白。这是因为，IE6采用的内核默认把DIV之间的距离增加...
内联块inline-block块下沉、多余的水平间隙垂直间隙的问题
小菜鸡程序媛的挣扎史
08-01 1031
把导航设置为inline-block以后总是会多出4px的垂直间隙 序 display有几种属性： inline是内联对象，比如<a/> 、 <span/>标签等，可以“堆在一起”显示，宽高由内容决定，不能设置； block是块对象，比如<div/>、<p/>标签等，要占一整行，但是宽高可以自定义； 为了弥补inline和block的不足...
关于inline-block问题
destiny'Note
10-31 611
前言 在重新学习css，做自己的学习demo时，设置一堆div在一行显示，呈现对比。 结果如图，设置了display:inline-block之后，出现了部分下沉现象。 改为float之后，又恢复正常对齐。 不过，很快就得到了解决。于是，就写了这篇关于inline-block问题的文章，包含了以前分享过的间距问题，在这里与大家分享。 一、下沉问题 原因 1. 行内元素有一个基线，所有在这一
inline-block 问题
CamilleZJ的博客
06-11 575
1. 问题如下：&lt;div class="honor-wall"&gt; &lt;div class="user-info-l"&gt;勋章墙&lt;/div&gt; &lt;a class="user-info-r user-honors" href="http://www.xx.com"&gt;         &lt;img class=&quot
各种各样的块级元素
qq_26239917的博客
03-10 534
1.内联块级元素 有宽高属性，但是不独占一行 典型 img 2.普通的块级元素 默认独占一行，可以设置宽高，但是依然独占一行 典型div 下面的元素就很特别了 先看一下这个 下面的顺序是指在无父子级关系的情况的排列顺序 这是元素层叠顺序图，相当于住房子一样，后来者居上，从层叠上下文到正z-index, 层叠上下文是1楼的，正index式7楼的，从楼顶坐电梯往下，先到7层，再依次到1层， 可以看到...
css字符上下间距
05-08
注意：为了使 `margin` 生效，需将元素设置为 `inline-block` 或块级元素，因为默认情况下内联元素不支持顶部和底部外边距[^2]。 #### 利用伪类 ::before 和 ::after 实现特殊效果 对于更加复杂的布局设计，比如给...
CSS布局问题排查与修复实战
# CSS 布局问题排查与修复实战 ## 1. Nena 饰品网站间距问题修复 ...浏览器默认会为有序和无序列表添加内边距，且不同浏览器的内边距值可能不同，这可能导致元素宽度超出预期，引发浮动下沉问题。 - **
2021-2022计算机二级等级考试试题及答案No.5410.docx
11-02
9. HTML元素分类：行内元素（inline elements）如、和，而是块级元素（block elements），它会占据一整行。 10. 并发操作的问题：并发操作如果不加以控制，可能会导致数据不一致性，例如脏读、不可重复读和幻读等...
a标签去掉默认属性加边框
最新发布
06-10
3.注意：a标签是行内元素，默认情况下设置宽高可能无效，如果需要设置宽高，可以将其转换为行内块元素（display:inline-block）或块元素（display:block）。4.考虑到浏览器兼容性，我们可以使用CSSreset的方法来统一...
“display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法
wangshengfei
05-07 2万+
在开始用display：inline-block的时候，只知道有baseline这么一说，而且当时记笔记解决了空隙问题，百度一堆文章，什么终极解决办法等等，还记录了一些问题，当时不明白，到今天才明白verticle-align的用法，原来可以这么用，以后可以随便玩inline-block，还有CSS hack，还有UC浏览器，这几天写的进哥的嘿凤梨首页在手机UC直接换行了，可能是间隙问题。。。bu
inline-block布局产生间隙的原因及解决办法（水平、垂直）
gladys_1111的博客
08-16 1万+
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
热门推荐
陈小峰（iefreer）的专栏
12-28 2万+
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面，如下所示：那么在表单总长度受限的情况下，当中间的邮箱名称过长时，会遮盖到旁边的按钮。我们可以把中间邮箱设定最大宽度，然后对于长度超出部分设置overflow: hidden来解决这个问题。但是这可能会引发另一个经典的 baseline 对齐问题，也就是本文要讨论的主要问题。
CSS的inline、block与inline-block
weixin_34191845的博客
06-06 347
基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(...
css absolute 和 float display block 的层级问题
Aimee的博客
11-20 1611
绝对定位 和 float 的层级在写代码的无意中，对有相同的父元素的不同的两个元素同时使用了position absolute 和float 定位，造成了层级混乱。
带有 inline-block属性的元素会导致宽度出现问题
weixin_30361753的博客
05-13 473
元素有属性display: inline-block，如果元素之间有空格，浏览器会计算空格的宽度，导致出现bug。 我们可以通过给有inline-block属性的元素的父级元素添加一个font-size：0的属性来解决这个bug。 转载于:https://www.cnblogs.com/moxiaohan/p/5489578.html...
行内块级元素和文本在同一行显示为什么会有底部边距呢
qq_26239917的博客
03-10 748
先上图 后来发现是因为另一个属性的原因，叫vertical-align 简称vera vera默认属性为baseline 啥是baseline 标准是小写x的底部就是baseline，是一条水平线 这空隙跟baseline有关系吗 肯定是有的 下面放图 对齐就对齐呗，空隙是谁？ 是baseline和bottom的距离 没有图片的时候可能觉得空隙是应该有的，加了图片发现图片上下不对称，不符...
【css】行内元素、行内块元素的默认间隙问题
汪小穆的博客
04-28 1万+
前言：我比较用喜欢行内元素，行内块元素来做横向导航，这样就不用再去担心浮动块级元素带来的不必要影响。但行内元素，行内块元素元素有个硬伤--有默认的间隙 一、行内标签元素出现问题 <body> <style> span { background:red; } </style> <span>行内元素</span&gt...
解决inline-block元素空白间距问题与优化方法
本文主要探讨了在HTML和CSS中使用`display: inline-block`时遇到的空白间距问题，特别是在多个元素并排排列时，由于浏览器默认的行内元素间距可能会导致多余的空白。作者通过实例展示了一个包含多个`<a>`标签的`div`...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值