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. k8s-No.2-pod学习

    本章目录 pod结构图 pod语法及参数说明 pod声明周期 一  pod结构图 大部分情况下,Openshift中的Pod只是容器的载体,通过Deployment.DaemonSet.RC.Job. ...

  2. ant安装报错：ANT_HOME is set incorrectly or ant could not be located. Please set ANT_HOME.

    后来发现问题原因是没有设置classpath,或者是\的原因: 正确配置如下:  ANT_HOME:D:\ant\apache-ant-1.10.5 CLASSPATH: %ANT_HOME%\lib ...

  3. MongoDB - Indexes

    #explain command pp db[:zips].find(:state => 'MD').explain #List all indexes: db[:zips].indexes.e ...

  4. yii的数据库相关操作

    获取某一列数据 self::find()->where(['pid'=>$this->id])->select('id')->column(); 更新操作 $model- ...

  5. react创建项目很慢，最后提示fetch failed的解决方法

    $ cnpm install -g create-react-app //创建react全局变量 $ create-react-app my-app //创建一个react项目 国内使用 npm 速度 ...

  6. AIX 7.1 RAC 11.2.0.4.0升级至11.2.0.4.6(一个patch跑了3个小时)

    1.环境 DB:两节点RAC 11.2.0.4.0升级至11.2.0.4.6 OS:AIX 7.1(205G内存 16C) 2.节点1.节点2(未建库) 2.1.patch 20420937居然用了3 ...

  7. 接口自动化框架(java)--4.接口Token传递

    这套框架的报告是自己封装的 一般token会在登录接口返回结果中呈现,从代码层面获取token的方式有很多种,我是使用jsonpath这个json路径语言去匹配token所在路径的key值 packa ...

  8. Nginx配置选项

    --prefix=path    定义一个目录,存放服务器上的文件 ,也就是nginx的安装目录.默认使用 /usr/local/nginx. --sbin-path=path 设置nginx的可执行 ...

  9. 简单的Json数据

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  10. 主线程 RunLoop 学习笔记

    以下为主RunLoop 的输出,能够看到不同的source0,source1,observer ---------------------------------- CFRunLoop{wakeup ...