真正了解css中的行间距问题

真正了解css中的行间距问题高度给定的元素,其内部单行文本垂直居中的一种实现方式为:给当前定高元素,设置line-height属性,其属性值等于当前元素的height值。今天了解到了一条相关知识,明白这个方法的实现原理.我们常说的单倍行距,双倍行距等等,主观上认为是line-height设置的值,如果量一下实际的效果,会发现,两行文本的间距,并非等于line-height的值.浏览器计算和分配行间距的方法间距=line-height–font-size;文本上下分配大小=间距/2;字号=12px;line-height:3;间距=3*12–12=24(px);文本上下分配大小=24/2=12(px)逻辑上如此无懈可击~o.0小知识点(济宁网站建设认为,应该这样)line-height的值,推荐使用数字而非带有单位的值,如,推荐使用line-height:2;不推荐使用line-height:24px;原因在于,line-height:24px;是一个固定的值,对于任何大小的文本,都采用这个值来计算行间距。若文本的字号过大,会出现重叠的问题.不带单位的值表示倍数.自然避免了该问题。看下边的例子!doctypehtmlhtmlheadmetacharset=utf-8/styletype=text/cssdiv{font-size:30px;font-family:Consolas,MicrosoftYahei,SimSun;margin:10px10px0px10px;padding:10px;}#demo_1{background:#EEE;border:solid1px#CCC;line-height:12px;}#demo_2{background:#333;border:solid1px#000;line-height:2;color:#FFF;}/styletitleLine-heighgdemo/title/headbodydivid=demo_1line-height:24px;br/line-height:24px;/divdivid=demo_2line-height:2;br/line-height:2;/div/body/html本文转自济宁网站建设