line-height: 2和line-height: 200%的区别

line-height: 2和line-height: 200%是有区别的。 两个属性设置给具体的某一个元素时是没有区别的。如下图:


都设置为line-height: 2
line-height: 200%,表现和设置为line-height: 2一样

那么他们的区别又在哪里呢?

区别就是他们设置两种不同的属性后其子元素表现样式上的区别! 可以看下面的例子:

  • 父元素设置line-height: 200%;属性时 父元素设置这个属性后,其所有子元素的行高都是一个具体的值,即他们父元素字体大小的200%。下例可看出子元素的行高都一致,即父元素字体大小的2倍,32px。
line-height:200%属性下子元素行高是具体的值
  • 父元素设置line-height: 2;属性时 父元素设置这个属性后,其所有子元素的行高都是自身字体大小的2倍。下例可看出子元素的行高都是不一致的。
line-height:2;属性下子元素行高都是一个相对自身字体大小的值
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • line-height: 2和line-height: 200%都表示行高是字体大小的2倍,但是它们是有区别的。当...
    辉夜乀阅读 4,935评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,185评论 1 4
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,578评论 0 5
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 5,072评论 0 3