line-height的理解

font-size:0清除display:inline-block元素换行符间隙,比如两个img标签之间有换行符

行内元素的高度是由其行高决定的。

Div或者其他元素内的图片,底部会有间隙,原因是图片是inline-block元素,默认与文字的基线对齐,文字的基线距离文字所在的lineline-boxes底部还有一段距离(行高的最底部),所以图片底部会出现间隙,(如果没有文字,可以认为存在隐匿文本节点,与真实文字的作用相同)解决方案:

1、 图片display:block,此时vertical-align不起作用或者说设置block之后文字已经另起一行了

2、 图片vertical-align:bottom,与文字所在区域的底部对齐

3、 设置父元素line-height:0,内部文字继承父元素的行高,其高度为0,也就不会对图片产生影响了。

时间: 2024-08-03 02:25:06

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 *

深入了解css的行高Line Height属性

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-

CSS——对height和line-height的理解

最近在做CSS界面时经常遇到line-height和height这两个属性,一直没搞很明白,今天静下心来好好网上查阅了一下,算是有所领悟.https://blog.csdn.net/a2013126370/article/details/82786681这个博主写的很不错,至少让我对line-height和height的理解更深刻了,值得借鉴. 一.一些基本概念 1.行高是指文本行基线间的垂直距离. 2.行距是上行的底线和下一行顶线之间的距离. 我个人理解,可以得出以下结论: 1. 在没有设置d

对性能测试工具JMeter 聚合报告中90% Line的解释说明

聚合报告中90% Line涉及到百分位数的概念,属于统计学术语,定义如下: 如果将一组数据从大到小排序,并计算相应的累计百分位,则某一百分位所对应数据的值就称为这一百分位的百分位数.可表示为:一组n个观测值按数值大小排列如,处于p%位置的值称第p百分位数. 例如中位数就表示第50百分位数.所以90%Line就好理解了,就是一组数按照由小到大进行排列,找到他的第90%个数P,那么这个数组中有90%的数将小于等于P,(1-90%)的数大于等于P.90%Line在性能测试的响应时间非常有意义,用来表示

深入理解浏览器兼容性模式

摘要:关于各种浏览器模式,网上已经有许多文档和资料了,但是很少有能够完全将几个概念阐述清楚的.大部分的资料稍显过时,有些内容可能已经不再适用了.本文中笔者将尽可能将几个概念阐述清楚,并去掉一些过时的内容,仅保留必要的干货. 想必你一定知道浏览器有个标准(Standards)模式和一个怪异(Quirks)模式,或许你还听说过有个"准标准(Almost Standards)"模式.而当你打开Internet Explorer的时候,又看到了什么浏览器模式.文档模式,还有什么兼容性视图等等.

C++入门

  C++入门必看,提升必看 Visual C++MFC入门教程 目录 +-- 第一章 VC入门|------ 1.1 如何学好VC|------ 1.2 理解Windows消息机制|------ 1.3 利用Visual C++/MFC开发Windows程序的优势|------ 1.4 利用MFC进行开发的通用方法介绍|------ 1.5 MFC中常用类,宏,函数介绍+-- 第二章 图形输出|------ 2.1 和GUI有关的各种对象|------ 2.2 在窗口中输出文字|------

CSS的标签与含义

  Font:设置字体系列.什么叫字体系列呢?是指对文字设定几个字体,当遇到第一个字体不能显示的文字时会自动用系列中的第二个字体或后面的字体显示.相对应的CSS属性是”font-family”.        Size:定义文字的大小.你可以通过选取数字和度量单位来选择具体的字体大小,或者你也可以选择一个相对的字体大小.最好使用Pixels作为单位,这样不会在浏览器中文本变形.一般小字体用比较标准的12px.相对应的CSS属性是”font-size”.        pt:(字号)根据windo

overflow应用场景

overflow属性可以设置的值有5种: (1)visible  默认值,内容不会裁剪,呈现在元素框之外: (2)hidden 内容会被裁剪,并且子元素内容是不可见的: (3)scroll 内容会被裁剪,但溢出的内容可以拖动浏览器自带的滚动条,查看内容: (4)auto 如果内容被裁剪,那么溢出的内容也是拖动移动浏览器自带的滚动条,查看内容: (5)inherit 继承父元素的overflow属性的值. 在实际运用中,除了hidden的应用比较多而灵活,其他几个还是很好理解和运用的.所以,这里着

AJAX之四 Ajax控件工具集

[学习目标] F    理解并掌握ScriptManager控件的使用 F    了解ScriptManager控件的使用 F    理解并掌握Timer控件的使用 F    理解并掌握UpdatePanel控件的使用 F    理解并掌握UpdateProgress控件的使用 [本章简介] 在上一章中,我们学习了Asp.Net AJAX的核心组件UpdatePanel.ScriptManager等.最后我们通过使用AutoComplete控件,用很少的代码就实现了自动完成功能.我们发现在Asp

CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <