再谈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

时间: 2024-10-05 19:49:48

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

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

OpenCV2马拉松第9圈——再谈对比度(对比度拉伸,直方图均衡化)

收入囊中 lookup table 对比度拉伸 直方图均衡化 葵花宝典 lookup table是什么东西呢? 举个例子,假设你想把图像颠倒一下,f[i] = 255-f[i],你会怎么做? for( int i = 0; i < I.rows; ++i) for( int j = 0; j < I.cols; ++j ) I.at<uchar>(i,j) = 255 - I.at<uchar>(i,j); 大部分人应该都会这么做.或者: for( i = 0; i &

C++ Primer 学习笔记_73_面向对象编程 --再谈文本查询示例

面向对象编程 --再谈文本查询示例 引言: 扩展第10.6节的文本查询应用程序,使我们的系统可以支持更复杂的查询. 为了说明问题,将用下面的简单小说来运行查询: Alice Emma has long flowing red hair. Her Daddy says when the wind blows through her hair, it looks almost alive, like a fiery bird in flight. A beautiful fiery bird, he

C++ Primer 学习笔记_74_面向对象编程 --再谈文本查询示例[续/习题]

面向对象编程 --再谈文本查询示例[续/习题] //P522 习题15.41 //1 in TextQuery.h #ifndef TEXTQUERY_H_INCLUDED #define TEXTQUERY_H_INCLUDED #include <iostream> #include <fstream> #include <sstream> #include <vector> #include <set> #include <map&g

再谈javascript图片预加载技术

图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示出来,所以lightbox显示的图片的速度体验要比直接输出的差很多,而本文说提到的预加载技术主要针对获取图片尺寸. 一段典型的使用预加载获取图片大小的例子: var imgLoad = function (url, callback) {    var img = new Image();   

【Go语言】【13】再谈GO语言的结构体

本文从如下四个方面再领着大家认识结构体 匿名结构体和匿名成员的结构体 值传递和引用传递 再谈嵌套结构体 面向对象 1.匿名结构体和匿名成员的结构体 如上篇所述,一个结构体需要先声明,再初始化,最后把初始化后的结构体赋值给其它变量,例如: /*声明结构体*/ type employee struct{ name,address string height,weight float64 } /*初始化结构体,并赋给变量emp*/ emp := employee{name:"eagle",

再谈word2003编程

再谈word2003编程 近期因为项目需要,写了许多word2003编程的东东.有时候遇到难题想查sdk说明,很难找到中文解释,对于e文不好的我来说,简直是天书.想必很多人多有感慨.     下面列出内容是一些常用的内容说明,希望对大家有帮助.     那就开始吧注意,下文的WAPP是我定义的word文档工程变量 的 //合并单元格    table.Cell(2, 2).Merge(table.Cell(2, 3));  //单元格分离     object Rownum = 2;     o

一起talk C栗子吧(第一百六十九回:C语言实例--再谈内置宏)

各位看官们,大家好,上一回中咱们说的是C语言中的布尔–bool类型的例子,这一回咱们说的例子是:再谈内置宏 .闲话休提,言归正转.让我们一起talk C栗子吧! 看官们,我们在第一百二十四回中介绍了C语言中的内置宏,当时介绍了常用的内置宏_LINE_和_FILE_.并且介绍了如何使用它们来输出它们所在位置的行号和所在的文件名.大家都知道,这两个内置宏经常被用来在文件中添加调试信息.因为我们写的程序难免会有错误,所以需要对程序进行调试.在文件中加入内置宏后,我们通过调试可以快速地找到错误发生在哪个

C++ Primer 学习笔记_73_面向对象编程 -再谈文本查询示范

面向对象编程 --再谈文本查询示例 引言: 扩展第10.6节的文本查询应用程序,使我们的系统可以支持更复杂的查询. 为了说明问题,将用下面的简单小说来运行查询: Alice Emma has long flowing red hair. Her Daddy says when the wind blows through her hair, it looks almost alive, like a fiery bird in flight. A beautiful fiery bird, he

C++ Primer 学习笔记_74_面向对象编程 -再谈文本查询示范[续/习题]

面向对象编程 --再谈文本查询示例[续/习题] //P522 习题15.41 //1 in TextQuery.h #ifndef TEXTQUERY_H_INCLUDED #define TEXTQUERY_H_INCLUDED #include <iostream> #include <fstream> #include <sstream> #include <vector> #include <set> #include <map&g