如何理解行高和高度？

行高

行高的测量：

当行高加载在行内元素如span标签（inline box）上时，一组inline box组成了一个line box即一整行的元素，而这个line box 的高度，会以inline box中最大的行高作为值，line box最终会影响当前元素的父元素的高度，使其产逼近于line box 的高度值，但会产生不到1px的误差。默认的行高是22px

行高的构成是由line box决定的，line box是由inline box组成的。Line box 的高度由inline box中行高最大值。

Inline-box元素中是没有设置高度这个概念的，想要改变高度，设置当前元素设置的字体大小，font-size:14px,对应的元素高度为18.29。默认字体大小font-size:16px,对应的元素高度为21.14，不同浏览器，大小可能会不相同。

对于一组inline box来说，无论你设置line-height为多少，都不会影响当前inline元素的高度。通过统一的字体大小的改变，可以影响当前inline元素的高度。当当前inline元素的高度，大于一组inline box设置的行高时，父元素的高度也会接近于inline元素的高度值

文本与文本的对齐

文本的垂直方向的对齐，对齐的对象以高度最高的元素g为标准，所有元素设置完对齐方式后，应向g对齐，比如vertical-align：middle，设置给所有文本元素，所有元素在垂直方向应以最高元素的中线对齐。

默认情况下文字的垂直对齐是以baseline对齐的。

文字与图片的对齐

当span的中的文字，和img中的图片放在一个容器中时，图片底部会产生空隙，这个空隙因文字的字体大小而定,14px大小的文字，会产生底部3px的距离。

解决方法：因为img的垂直方向对齐方式为baseline对齐，将其改为bottom对齐即可。

如何理解行高和高度？相关推荐

字体大小，行高，高度
ie6下,font-size 等于 line-height 时,字体受行高限制,显示不全. 如图: 所以应该将行高设置为大于字体值2px,切记不要这样写font:12px/12px,要12px/14 ...
行高和高度的三两事：行高＞高度文字靠下；行高＜高度文字靠上
先明白行高的原理,行高包含内容区域的高度.上半行间距和下班行间距.如果line-heigt:300px; font-size:20px;算出间距280px,上下半行间距都为140px.chrome默认 ...
android+listview设置行高,android – 无法在行xml中设置listView行高的高度
这是我的自定义适配器的getView方法: public View getView(int position, View convertView, ViewGroup viewGroup) { Sin ...
【转】css行高line-height的一些深入理解及应用
一.前言前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高",是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解 ...
css行高line-height的一些深入理解及应用
by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意 ...
0基础快速入门CSS技术栈（4）—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景，及最为重要的CSS三大特性附带权重计算笔试题（附详细案例源码解析过程）
文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...
7. 前端基础--CSS背景和行高
文章目录 CSS背景和行高 1. CSS 背景(background) 1.1 背景颜色(color) 1.2 背景图片(image) 1.3 背景平铺(repeat) 1.4 背景位置(positi ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...
CSS基础-行高（height和line-height)【学习笔记】
1 行高测量行高的测量方法: 2 单行文本垂直居中行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐. 文字的行高等于盒子的高度. 这里情况些许复杂,开始学习,我们可以先从简单地方 ...

如何理解行高和高度？

如何理解行高和高度？相关推荐

最新文章

热门文章