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. YOLO V3 错误总结

    问题1 TypeError: function takes exactly 1 argument (3 given) 报错说PIL库中的函数只接收到一个参数,应该给三个,自己在这里记录下解决方法,出错 ...

  2. 《Redis 命令操作》

    一:Redis 的启动与关闭 - 关闭指定端口的 Redis - redis-cli -p 9200 shutdown - 开启 Redis - redis-server redis.config 二 ...

  3. tcprstat测试服务器请求响应时间

    tcprstat使用,tcprstat必须使用root权限才能使用 tcprstat -p 3306 -t 1 -n 5 -l 192.168.52.250 centos统计分析所有的IP地址

  4. Alibaba, I'm interested in you.

    Working for Alibaba is an aspiration for some. For other it’s the possibility of lucrative stock opt ...

  5. spring boot错误: 找不到或无法加载主类

    一:当在eclipse启动spring boot项目时出现问题: springboot错误: 找不到或无法加载主类 解决办法: 1,通过cmd命令行,进入项目目录进行,mvn clean instal ...

  6. React之ref

    作为响应式开发框架React,我们知道他是数据驱动的,但有时候避免不了还是得动用到DOM操作,这个时候我们就可以用到ref:用法如下: 然后这样做有个弊端,当一个 ul 下面的 li 是动态添加的时候 ...

  7. 汇编-10.0-CALL和RET指令

    call和ret指令都是转移指令,他们都是修改IP,或同时修改CS和IP.它们常被共同用来实现子程序设计. 1.ret和retf ret指令用栈中的数据,修改IP的内容,从而实现近转移: retf指令 ...

  8. jeecg自定义按钮使用exp属性不起作用

    为什么要写这篇文章? 之前写过一篇类似的文章 jeecg笔记之自定义显示按钮exp属性,但是有些小伙伴留言参考后不起作用,当时我的 jeecg 版本为3.7.5,最终以版本不同,暂时搁浅了.今天,重新 ...

  9. 正则re

    1.简介 其实re在基本模块里已经介绍过,但是在爬虫中re是非常重要的,所以在这里再进行详细描述. re在解析html内容时是效率最高的,但是也是最难的,一般来说,都是结合xpath和re使用,这样解 ...

  10. 【Solution】API测试工具,访问方式

    1. post的时候,@requestBody 用 json的传递方式