inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如下所示:
那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边的按钮。
我们可以把中间邮箱设定最大宽度,然后对于长度超出部分设置overflow: hidden来解决这个问题。
但是这可能会引发另一个经典的 baseline 对齐问题,也就是本文要讨论的主要问题。
1. 问题现象
我们先给出一个在线实例:
http://wow.techbrood.com/fiddle/15438
我们可以看到当给中间的 inline-block 元素p添加overflow: hidden属性后,其左右相邻元素被奇怪的向下拉动了一定的距离。
2. 解决方法
常用的解决方法是为上述inline-block元素添加vertical-align: bottom。你可以在上面的例子中在线测试下。
3. 问题原因
W3的规范对此行为有明确规定:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
我们从规范中可以知道当一个inline-block元素被设置overflow非visible属性值后,其baseline将被强制修改为元素下外边沿。
我们知道默认情况下,baseline为字符x的底线位置且vertical-align属性值为baseline。
此外由于div包含块中只有行内级别的元素,所以将生成一个IFC(行内格式化上下文)来规定其中元素的渲染规则。
按照IFC布局规则,垂直方向上对齐遵照vertical-align属性(请参考阅读:http://techbrood.com/Guide/h5b2a?p=css-ifc),
那么p元素两边的2个匿名line box将被迫向下移动一个偏移值来和p元素对齐。
那么可能有人要进一步追问了,为什么W3要做如此奇怪的规定呢?
这是因为overflow被设置为非visible值,将使得该inline-block元素中的last line box的渲染处于不确定状态(浏览器可能渲染也可能不渲染),
这让保持默认规则的baseline也处于不确定状态,那么索性就规定以确定的下外边沿来作为baseline。
"baseline" -
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
4. 偏移的计算
上述的向下偏移量,实际上就是inline-block元素的默认baseline和其下外边沿的距离。
shift = D(descent) part of Glyph(字母下降部分)+ bottom half-leading
5. 参考链接:
1. http://techbrood.com/Guide/h5b2a?p=css-line-height
2. http://www.w3.org/TR/CSS2/visudet.html#propdef-line-height
3. http://www.w3.org/TR/CSS2/visudet.html#leading
by iefreer
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移相关推荐
- [Web 前端] inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
cp from : https://blog.csdn.net/iefreer/article/details/50421025 在表单修改界面中常会使用一个标签.一个内容加一个修改按钮来组成单行界面 ...
- 设置行内元素宽高和背景色后,行内元素文本不水平垂直居中解决方案
前言 行内元素:指在同一行内不自动换行,可以和其他行内元素在同一水平的元素,不可以设置宽高. 行内元素设置宽高:行内元素想要设置宽高,需要用display:inline-block设置(详解如下表). ...
- 行内元素和块元素的区别
块元素:不管内容多少,块元素都会在浏览器中独占一行.可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行) 缺点:1.相邻元素垂直.相邻外边距会重叠.margin-bottom和mar ...
- HTML 行内元素 与 块级元素
目录 1.HTML 行内元素 与 块级元素 2.常用的 display 值 3.行内元素 和 块级元素 盒模型区别 4.块级元素 与 overflow 5.实践 1.HTML 行内元素 与 块级元素 ...
- 【Css 基础】-- 块元素和行内元素、行内块元素
1.块元素 display:block 常见的块元素有哪些: <h1>~<h6>.<p>.<div>.<ul>.<ol>.< ...
- HTML行内元素和块级元素
1 常见的行内元素和块级元素 特点 注意 块级元素 div h1~h6 p ul ol li 比较霸道:自己独占一行 高度,宽度.外边距以及内边距都可以控制 宽度默认是容器(父级宽度)的100% ...
- 行内元素中的非替换行内元素和替换行内元素
今天看<别具光芒css>发现了以前未见过的词,替换的行内元素和非替换的行内元素. 替换的行内元素具有"内在尺寸",尺寸是有自身决定的,而不会受周围 ...
- 父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小
发现 父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
最新文章
- sap系统工单关闭_什么样的系统算是坑
- 算法------设计哈希映射
- ROS学习(十三):time 和 Timer
- 机器学习基础(1)——绪论
- 一个java文件中可包含多个main方法
- 微信端修改title
- javap 指令集 (转)
- Java 核心技术点之注解
- 构建freeswitch, make cd-moh-install下载不了文件怎么办?
- 修改移动光猫,提升上网速度
- php 开源网店系统,企业级开源PHP网店系统海盗云商(Haidao)
- CRM如何管理企业销售流程
- 图书馆图书搜索引擎(全球100多图书馆)
- 百度(杭州)创新中心人工智能产业论坛落幕,看AI如何引发行业革命
- 实时查看MD文件效果 - 在线Markdown预览
- 抖音创作者信用分:如何提升信用等级,获取更多机会
- 聚力优创:拼多多的店铺怎么引流?秘诀分享
- 镭速联合Azure Blob 存储,重塑大文件传输平台存储架构
- linux常用命令词典
- Linux 一句精彩的回答【转】