line-height支持属性值

1.normal（默认属性）

跟着用户的浏览器走，且与元素字体关联

normal值 = 字体大小/100

2.<number>

使用数值作为行高值。如：line-height:1.5 根据当前元素的font-size大小计算 line-height = 1.5*20px(font-size) = 30px

3.<length>

使用具体长度值作为行高值

4.<percent>

使用百分比作为行高值

5.inherit（继承）

input框等元素默认行高是normal,使用inherit可以让文本框样式可控性更强

实例1：图片下有间距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div style="background-color: gray">

        <img src="123.jpg" style="width: 300px">

    </div>

    <!-- 引起这个问题的原因是图片后接了行藏文本元素，而默认的vertical-align：baseline

      也就是说图片要对其隐藏文本元素的基线，所以引发了下面间距的问题

      解决的办法有三个：1.img元素display:block

                       2.img元素vertical-align:bottom

                       3.父级div元素line-height:0

    -->

</body>

</html>

line-height各类属性值的更多相关文章

  1. （1-2）line-height的各类属性值

    (1-2)line-height的各类属性值 首先来个疑问!没有问题印象不深嘛 一.line-height支持哪些属性值呢? 五只手指头就能数过来了咯. 比如normal, <number> ...

  2. C# WInForm中 窗体的this.width和this.height的属性值不能大于显示器的最大分辨率

    最近在做一个小项目的时候,发现在 1680x1050 分辨率显示器上写的代码,将窗体的宽度和高度 设置成了 1600×900,在高于1600×900的分辨率上缩放显示很正常, 而后转移到 分辨率低于 ...

  3. css的五种属性值----在路上（21）

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  4. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  5. 前台jquery+ajax+json传值，后台处理完后返回json字符串，如何取里面的属性值？（不用springmvc注解）

    一.取属性值 前台页面: function select(id){ alert("hfdfhdfh"+id); $.ajax({ url:"selectByid.jsp& ...

  6. 常见标签的默认属性值及相互作用——关于CSS reset的思考

    在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

  7. jquery获取、改变元素属性值

    //标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性.JS里的DOM属性名有时和原元素属性名不同. //==================================操作元 ...

  8. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  9. class属性中为什会添加非样式的属性值？

    来由 在一些插件中经常看到, 在class属性中出现一些跟样式无关的属性值, 这些值在css样式中没有对应定义, 但是在js中会根据这个值来给dom对象添加特殊的行为, 例如: jquery vali ...

随机推荐

  1. 刀客139qq算命

    https://www.zhouyi.cc/bazi/sm/BaZi.php 好的算命网站 根据辛亥时看出来的午亥暗合没那么简单他不克你她太弱了婚姻不顺,是因为夫妻宫是财坏印是要比劫克财克财很重要 出 ...

  2. 在linux环境下部署禅道环境

    下载禅道安装包: 1)cd /home/ 2)mkdir app 3)ls 4)cd app/ 5)pwd 6)wget +禅道地址(http://dl.cnezsoft.com/zentao/9.8 ...

  3. keras训练cnn模型时loss为nan

    keras训练cnn模型时loss为nan 1.首先记下来如何解决这个问题的:由于我代码中 model.compile(loss='categorical_crossentropy', optimiz ...

  4. Timestamp “时间戳” - 术语

    A timestamp is a sequence of characters or encoded information identifying when a certain event occu ...

  5. Prometheus部署监控容器

    Prometheus架构描述 Prometheus 是一个非常优秀的监控工具.准确的说,应该是监控方案.Prometheus 提供了监控数据搜集.存储.处理.可视化和告警一套完整的解决方案 Prome ...

  6. Error: Cannot find module 'webpack/schemas/WebpackOptions.json' 问题解决

    webpack 和  webpack-dev-server的版本问题,需要版本配套才行.现在webpack最新版本是4.16.1了,最新的webpack应该有WebpackOptions.json文件 ...

  7. log4j2配置ThresholdFilter，让info文件记录error日志

    日志级别: 是按严重(重要)程度来分的(如下6种): ALL < TRACE < DEBUG < INFO < WARN < ERROR < FATAL < ...

  8. Oracle sql function LISTAGG

    select business_unit, voucher_id, listagg( vat_txn_type_cd, ',') within group (order by business_uni ...

  9. Rsync数据同步工具

                                        Rsync数据同步工具 什么是Rsync? Rsync是一款开源的.快速的.多功能的,可以实现全量及增量的本地或原程数据同步备份 ...

  10. 201902<<百岁人生>>

    过年的那段时间,在家看到公司推荐的10本2019年必读书籍,里面有这本书,于是就开始了.... 第一次这么认真的看这类书籍,看完之后感触颇多,毕竟这个问题我从没思考过,很少站在这样的高度去看所有方方面 ...