每次遇到多个inline-block元素排列的怪异垂直位置的问题的时候都可以通过经验,设置vertical-align来解决,没深入研究过,现在需要分析总结下这个问题。

问题引出

有小鲜肉新做了个页面,其中一段代码是这样:

<!DOCTYPE html>
<html>
<meta charset="utf-8"></meta>
<head>
<title>vertical-align</title>
<style type="text/css">
body{
background:#eee;
font-size:16px;
}
#linkBox{
background:pink;
}
#linkBox .linkURL{
display:inline-block;
background:#fff;
padding:6px 16px;
overflow:hidden;
}
#linkBox .button{
border:none;
display:inline-block;
background:orange;
line-height:24px;
padding:6px 8px;
}
</style>
</head>
<body>
<div id="linkBox">
<span class="linkURL">https://www.taobao.com</span>
<button class="button">点击复制</button>
</div>
</body>
</html>

他很困惑,为什么两个inline-block的水平位置是这样。

1.首先要剔除overflow:hidden的影响,去掉它之后:

<html>
<meta charset="utf-8"></meta>
<head>
<title>vertical-align</title>
<style type="text/css">
body{
background:#eee;
font-size:16px;
}
#linkBox{
background:pink;
}
#linkBox .linkURL{
display:inline-block;
background:#fff;
padding:6px 16px;
}
#linkBox .button{
border:none;
display:inline-block;
background:orange;
line-height:24px;
padding:6px 8px;
}
</style>
</head>
<body>
<div id="linkBox">
<span class="linkURL">https://www.taobao.com</span>
<button class="button">点击复制</button>
</div>
</body>
</html>

样式如下:

可以看到,前面span元素的高度被overflow:hidden抬高了,这个问题且先搁置,先看下为什么按钮和span是这样的垂直位置的:

对于display:inline-block的块,没有设置vertical-align的时候,其默认值为baseline,对于baseline的解释是:

baseline的概念就是字母x的下边缘,这里可以分析下这个例子,前面的span没有设置line-height,在调试工具里面可以看到它的行高是默认的18px,而后面button的line-height被设置成了24px;vertical-align默认的方式是baseline,就显示成如上图的样式了。

想要全部垂直居底部,添加vertical-align:bottom;就可以了:

添加之后是这样了:

2.再来看看overflow:hidden抬高的问题:

'inline-block'的baseline是其在normal flow中的最后一个line box的baseline,除非它没有in-flow line boxes,或者其‘overflow’属性不等于‘visible’,这种情况下,其baseline位于bottom margin边上。

对这段的解释,就是:

i) 如果inline-block的overflow设为visible(默认属性),则其baseline是当前行的containing block的baseline。

ii) 如果overflow设为其他,则其bottom margin位于前行的containing block的baseline;

我们这种情况下,inline-block元素的overlow:hidden,所以元素的底部边框在父元素的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.

对,就是这样了。

参考:

1.http://stackoverflow.com/questions/22421782/css-overflow-hidden-increases-height-of-container

2.https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

再谈vertical-align与line-height的更多相关文章

  1. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  2. C++ Primer 学习笔记_43_STL实践与分析(17)--再谈迭代器【中】

    STL实践与分析 --再谈迭代器[中] 二.iostream迭代[续] 3.ostream_iterator对象和ostream_iterator对象的使用 能够使用ostream_iterator对 ...

  3. 再谈HTTP2性能提升之背后原理—HTTP2历史解剖

    即使千辛万苦,还是把网站升级到http2了,遇坑如<phpcms v9站http升级到https加http2遇到到坑>. 因为理论相比于 HTTP 1.x ,在同时兼容 HTTP/1.1 ...

  4. 从网卡发送数据再谈TCP/IP协议—网络传输速度计算-网卡构造

    在<在深谈TCP/IP三步握手&四步挥手原理及衍生问题—长文解剖IP>里面提到 单个TCP包每次打包1448字节的数据进行发送(以太网Ethernet最大的数据帧是1518字节,以 ...

  5. Python学习6——再谈抽象(面对对象编程)

    1.对象魔法 在面对对象编程中,术语对象大致意味着一系列数据(属性)以及一套访问和操作这些数据的方法. 使用对象而非全局变量以及函数的原因有多个,而最重要的好处不过以下几点: 多态:可对不同类型的对象 ...

  6. 小数据池 is和== 再谈编码

    昨日回顾 上节课内容回顾 1. 字典 {key:value, key:value.....} 成对的保存数据 字典没有索引. 不能切片, 字典的key必须是可哈希的.不可变的 1. 增加: dic[新 ...

  7. Python基础 第7章 再谈抽象

    1. 1 多态 多态,即便不知道变量指向的是哪种对象,也能对其执行操作,且操作的行为将随对象所属的类型(类)而异. 1.2 多态与方法 当无需知道对象是什么样的就能对其执行操作时,都是多态在起作用. ...

  8. mui初级入门教程(四)— 再谈webview,从小白变“大神”!

    文章来源:小青年原创发布时间:2016-06-05关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...

  9. [转载]再谈百度:KPI、无人机,以及一个必须给父母看的案例

    [转载]再谈百度:KPI.无人机,以及一个必须给父母看的案例 发表于 2016-03-15   |   0 Comments   |   阅读次数 33 原文: 再谈百度:KPI.无人机,以及一个必须 ...

  10. Support Vector Machine (3) : 再谈泛化误差(Generalization Error)

    目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...

随机推荐

  1. bzoj1188 [HNOI2007]分裂游戏 博弈论 sg函数的应用

    1188: [HNOI2007]分裂游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 973  Solved: 599[Submit][Status ...

  2. Bash条件判断

    bash编程之:条件判断,判定后续操作的前提条件是否满足, bash编程之: 条件判断常用类型: 整数测试:比较两个整数谁大谁小,是否相等: 二元测试: num1 操作符 num2 -eq: 等于 - ...

  3. CSS盒子模型的一些理解

    盒子模型相当于把现实中的盒子形象化. 盒子模型的大小="内容(content)+内填充(padding)+边框(border)+外边距(margin)" 盒子模型方向为:top, ...

  4. python PIL Image模块

    原地址:http://hi.baidu.com/drunkdream/item/9c9ac638dfc46ec6382ffac5 实验环境: windows7+python2.6+pycrust+PI ...

  5. o-sync-and-o-direct

    https://lwn.net/Articles/457667/ https://lwn.net/Articles/457667/ https://lwn.net/Articles/457667/ h ...

  6. 经验分享:Linux 双网卡 不同网段 网络互通

    环境如下: 现状:一台linux主机上有两个网卡eth0 和eth1 ,机器能访问192网的服务资源,但不能访问10网段的资源. 要求:linux能通过eth1访问10网段的资源 路由: 网卡: 操作 ...

  7. Hessian最佳实践

    前言:本文主要介绍‘独立的Hessian技术’与‘结合Spring技术’的两种Hessian接口开发模式及代码示例. 一.独立的Hessian技术开发步骤 Hessian-Java服务器端必须具备以下 ...

  8. Stream 和 byte[] 之间的转换

    Stream 和 byte[] 之间的转换 一. 二进制转换成图片 ? 1 2 3 4 5 MemoryStream ms = new MemoryStream(bytes); ms.Position ...

  9. Three.js开发指南---使用构建three.js的基本组件(第二章)

    .gui本章的主要内容 1 场景中使用哪些组件 2 几何图形和材质如何关联 3 正投影相机和透视相机的区别 一,Three所需要的基本元素 场景scene:一个容器,用来保存并跟踪所有我们想渲染的物体 ...

  10. winform基本控件的使用2(用户登录界面的设计)

    首先还是通过例子来讲解,这次的实验主要是使用messageBox的使用方法,关于messageBox的使用方法在我的博客里面有相关的转载,请自己查看,下面说一下实验要求. 功能要求:模拟一个用户登陆的 ...