再谈vertical-align与line-height
每次遇到多个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的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- C++ Primer 学习笔记_43_STL实践与分析（17）--再谈迭代器【中】
STL实践与分析 --再谈迭代器[中] 二.iostream迭代[续] 3.ostream_iterator对象和ostream_iterator对象的使用 能够使用ostream_iterator对 ...
- 再谈HTTP2性能提升之背后原理—HTTP2历史解剖
即使千辛万苦,还是把网站升级到http2了,遇坑如<phpcms v9站http升级到https加http2遇到到坑>. 因为理论相比于 HTTP 1.x ,在同时兼容 HTTP/1.1 ...
- 从网卡发送数据再谈TCP/IP协议—网络传输速度计算-网卡构造
在<在深谈TCP/IP三步握手&四步挥手原理及衍生问题—长文解剖IP>里面提到 单个TCP包每次打包1448字节的数据进行发送(以太网Ethernet最大的数据帧是1518字节,以 ...
- Python学习6——再谈抽象（面对对象编程）
1.对象魔法 在面对对象编程中,术语对象大致意味着一系列数据(属性)以及一套访问和操作这些数据的方法. 使用对象而非全局变量以及函数的原因有多个,而最重要的好处不过以下几点: 多态:可对不同类型的对象 ...
- 小数据池 is和== 再谈编码
昨日回顾 上节课内容回顾 1. 字典 {key:value, key:value.....} 成对的保存数据 字典没有索引. 不能切片, 字典的key必须是可哈希的.不可变的 1. 增加: dic[新 ...
- Python基础 第7章 再谈抽象
1. 1 多态 多态,即便不知道变量指向的是哪种对象,也能对其执行操作,且操作的行为将随对象所属的类型(类)而异. 1.2 多态与方法 当无需知道对象是什么样的就能对其执行操作时,都是多态在起作用. ...
- mui初级入门教程（四）— 再谈webview，从小白变“大神”！
文章来源:小青年原创发布时间:2016-06-05关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...
- [转载]再谈百度：KPI、无人机，以及一个必须给父母看的案例
[转载]再谈百度:KPI.无人机,以及一个必须给父母看的案例 发表于 2016-03-15 | 0 Comments | 阅读次数 33 原文: 再谈百度:KPI.无人机,以及一个必须 ...
- Support Vector Machine (3) : 再谈泛化误差（Generalization Error）
目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...
随机推荐
- commonJS
摘自阮一峰博客:http://javascript.ruanyifeng.com/nodejs/module.html 目录 概述 module对象 module.exports属性 exports变 ...
- 2016HUAS_ACM暑假集训4D - 计数，排列
一个错排公式的基础应用. 大致题意:求n个数的错误排列方式.(每个都要错) 在这里先贴一下错排公式:D(1)=0:D(2)=1:D(n)=(n-1)*(D(n-1)+D(n-2)) 它的推导也非常有意 ...
- Single Number
Given an array of integers, every element appears twice except for one. Find that single one.Your al ...
- less和sass
sass 总体来说应用是和less差不多的,但是也有所不同 sass是用“$”符号来命名 然后加值来先引入后使用的方式. 同时也应该注意到的是sass有两种后缀名文件:一种后缀名为sa ...
- Linux内核@系统组成与内核配置编译
Linux系统由什么组成? 由用户空间(应用程序+GNU C标准库)和内核空间(系统调用接口+内核+内核架构代码)组成. Linux内核到底是什么?以及组成. ARM的七种操作级别? 内核网络协议栈( ...
- 在 AndroidStudio 中添加和使用 Support Library
添加Support Library 项目需要用到Support包时如何添加?其实非常简单. 第一步 打开SDK Manager 确认安装了最新的Support Library 和 Support Re ...
- pwnable simple login
这是一周前做的一道题目,总的来说这道题很简单,当然一开始看了半天没发现溢出点也是十分的惭愧,题目出的很良心,思路就是溢出之后我们可以控制main函数的ebp, 进而在main函数返回时进行漏洞利用. ...
- PHP常用的文件操作函数集锦
以下是个人总结的PHP文件操作函数.当然,这只是部分,还有很多,我没有列出来. 一 .解析路径: 1 获得文件名:basename();给出一个包含有指向一个文件的全路径的字符串,本函数返回基本的文件 ...
- memcache/memcached安装教程并应用Tinkphp3.2
在自己的新程序中打算全面应用memcached技术,这个很容易理解这是memcached是内存缓存,但是怎么还有memcache呢?其实很简单,memcache是php的一个扩展,用于php管理mem ...
- 10天学会phpWeChat——第一天：核心框架的目录结构
phpWeCaht是一款优秀的PC网站+微信公共号开发框架. 本博客系列将图文结合,详细介绍phpWeChat 的使用方法,今天进入phpWeChat系列教程之<10天学会phpWeChat&g ...