inline-block元素因基线对齐而造成上浮的问题
假设我需要实现将三个块级元素并排对齐的如下效果：
代码如下：
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.container {
display: inline-block;
margin: 15px;
padding: 5px;
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head> <body> <div style="margin: 200px;">
<div class="container">
<h2>Title</h2>
<p>One One One One</p>
</div> <div class="container">
<h2>Title</h2>
<p>Two Two Two Two</p>
</div> <div class="container">
<h2>Title</h2>
<p>Three Three Three Three</p>
</div>
</div> </body>
</html>
然而，如果当某个div块中没有内容时，就会发生该div块上浮无法对齐的情况：
造成这种现象的原因在于：行内元素和替换元素（如img、input、textarea等）会有个称做 基线 的东西；基线位于文字的最底部。如果块状行内元素（inline-block）中无文本内容的时候，其基线就会自动移至元素的最底部。另外，图片以及非替换元素的基线也是为元素最底部的。
上述元素都是以这个基线作为垂直对齐的默认参照的，那么 块状行内元素无法对齐的原因就很容易理解了；看下面几个例子：
既然这种情况是由元素以基线对齐才导致的，那么 只要设置元素的垂直对齐方式为别的就可以了；即使用vertical-align属性，该属性的参数如图：
比如为块状行内元素引入样式 vertical-align: top; 后，便可以了：
inline-block元素因基线对齐而造成上浮的问题的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
随机推荐
- Ubantu下 docker的安装
另一种方法 1.切换到root权限或者用sudo 2.升级source列表并保证https和ca证书成功安装 # apt-get update # apt-get install apt-transp ...
- 远程图形界面：VncServer与KDE桌面远程连接
强烈不建议putty+xming的工作方式,太慢了,且界面也不是特别友好. 原文:vncserver与KDE远程连接 建议:不过还是建议使用Xshell,使用 ...
- 字符编码方式ASCII、Unicode、UTF-8
一.ASCII 1.介绍 即American Standard Code for Information Interchange(美国信息交换标准代码),是基于拉丁字母的,主要用于显示现代英语和其他西 ...
- 使用CocoaPods，文档中出现引用头文件找不到的问题。
现在很多人都会使用CocoaPods来管理自己使用的第三方开源代码,这两天我的工程中碰到了这样一个问题,当我使用CocoaPods来进行三方源码的引入,但是在实际的工程当中引入出现了这样一个问题,就是 ...
- jquery选择器，筛选器，属性，事件 基础
左边栏实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 梦想CAD控件关于id与handle问题
ID和句柄具有各自的特点: (1) ID:在一个任务中,本次任务中都是独一无二的.在不同的任务中,同一个图形对象的ID可能不同. (2) 句柄:在一个任务中,不能保证每个对象的句柄都唯一,但是在一个图 ...
- 浅谈FFC
FFC(Flexible Formatting Context) CSS3引入了一种新的布局模型——flex布局(之前有文章介绍过).flex是flexible box的缩写,一般称之为弹性盒模型.和 ...
- Java基础概念语法
Java基础概念语法 注释 单行注释 //行注释说明 多行注释 /* 多行注释说明 */ 文档注释 /** *@author 程序的作者 *@version 源文件的版本 *@param 方法的参数说 ...
- 习题练习（视觉slam14讲课后习题）
设有⼩萝⼘1⼀号和⼩萝⼘⼆号位于世界坐标系中. ⼩萝⼘⼀号的位姿为:q1 = [0.55, 0.3, 0.2, 0.2], t1 = [0.7, 1.1, 0.2]T(q 的第⼀项为实部).这⾥的 q ...
- 有关bash，我希望我能知晓的十件事
简介 我之前的一篇文章比我预想的更受欢迎,因此我想再写一篇文章来介绍一些不太知名的bash功能 正如之前所言,由于我觉得bash是一种要经常使用(且需理解)的技术,所以我在研究bash时写了一本书.虽 ...