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

问题引出

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <meta charset="utf-8"></meta>
  4.     <head>
  5.         <title>vertical-align</title>
  6.         <style type="text/css">
  7.             body{
  8.                 background:#eee;
  9.                 font-size:16px;
  10.             }
  11.             #linkBox{
  12.                 background:pink;
  13.             }
  14.             #linkBox .linkURL{
  15.                 display:inline-block;
  16.                 background:#fff;
  17.                 padding:6px 16px;
  18.                 overflow:hidden;
  19.             }
  20.             #linkBox .button{
  21.                 border:none;
  22.                 display:inline-block;
  23.                 background:orange;
  24.                 line-height:24px;
  25.                 padding:6px 8px;
  26.             }
  27.         </style>
  28.     </head>
  29.     <body>
  30.         <div id="linkBox">
  31.             <span class="linkURL">https://www.taobao.com</span>
  32.             <button class="button">点击复制</button>
  33.         </div>
  34.     </body>
  35. </html>

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

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

  1. <html>
  2.     <meta charset="utf-8"></meta>
  3.     <head>
  4.         <title>vertical-align</title>
  5.         <style type="text/css">
  6.             body{
  7.                 background:#eee;
  8.                 font-size:16px;
  9.             }
  10.             #linkBox{
  11.                 background:pink;
  12.             }
  13.             #linkBox .linkURL{
  14.                 display:inline-block;
  15.                 background:#fff;
  16.                 padding:6px 16px;
  17.             }
  18.             #linkBox .button{
  19.                 border:none;
  20.                 display:inline-block;
  21.                 background:orange;
  22.                 line-height:24px;
  23.                 padding:6px 8px;
  24.             }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div id="linkBox">
  29.             <span class="linkURL">https://www.taobao.com</span>
  30.             <button class="button">点击复制</button>
  31.         </div>
  32.     </body>
  33. </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. LeetCode 【31. Next Permutation】

    Implement next permutation, which rearranges numbers into the lexicographically next greater permuta ...

  2. Linux内核@系统组成与内核配置编译

    Linux系统由什么组成? 由用户空间(应用程序+GNU C标准库)和内核空间(系统调用接口+内核+内核架构代码)组成. Linux内核到底是什么?以及组成. ARM的七种操作级别? 内核网络协议栈( ...

  3. python字符串基本操作

  4. 【HDU1730】Northcott Game（Nim问题）

    Northcott Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  5. [课程设计]Scrum 1.4 多鱼点餐系统开发进度

    Scrum 1.4 多鱼点餐系统开发进度 (点餐页面框架布置) 1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选题:餐厅到店点餐系 ...

  6. soanar,jenkins

    http://www.sonarqube.org/ https://blogs.msdn.microsoft.com/visualstudioalm/2016/02/18/sonarqube-scan ...

  7. EX:The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secure channel.

    EX:The underlying connection was closed: Could not establish trust relationship for the SSL/TLS secu ...

  8. ASP.NET MVC获取微信返回的json数据分页

    View @model JiaYe.WeiXin.Models.ViewModels.UserViewModel <div class="pull-left pagination&qu ...

  9. Microsoft Visual Studio 2013 Update 5 direct download link for full ISO

    From:http://www.nickdu.com/?p=604 Visual Studio 2013 Update 5 is now released and maybe you are also ...

  10. [PHP] - Apache + PHP 环境搭建

    Apache和PHP的版本分别为: httpd-2.4.9-win64-VC11.zip php-5.6.9-Win32-VC11-x64.zip 下载地址: php-5.6.9-Win32-VC11 ...