CSS之行高(line-height)详解

2023-11-09

行高(line-height)

       1.浏览器中默认文字大小为16px;
       2.浏览器中默认文字行高为18px;

行高=文字大小+上下间距

       1.通过设置文字的行高,改变的就是文字的上下间距。
       2.如果不设置行高,文字的大小可以影响行高值
       3.文字的字体也可以影响行高值。

作用:

       1.通过设置行高,改变文字之间的间距,使外观更美观。
       2.可以通过设置文字行高,实现文字在容器中垂直居中(只要将行高值设置等于容器的高度记即可[实际高度])

行高实际上是俩条基线之间的距离等同于文字大小+上下间距

在这里插入图片描述

行高单位问题(最后都会转换为px)

px | em | % | 不写单位

如果单独给一个标签设置文字行高

       px:
该标签中的文字行高与文字大小无关,行高设置为多少,那么文字的实际行高就是多少。
       em:
文字行高=文字的大小设置的行高值。
       不带单位:
文字行高=文字的大小
设置的行高值。
       %:
文字行高=文字的大小*设置的行高值。

如果给父元素设置行高,子元素中的行高如何表现

父元素的行高em:
子元素的行高=父元素文字大小父元素设置的行高(与子元素的文字无关)先计算后继承
父元素的行高px:
子元素的行高=父元素的行高(与文字大小无关,继承性)
父元素的行高%:
子元素的行高=父元素文字大小
父元素设置的行高(与子元素的文字无关)先计算后继承
父元素不带单位:
子元素的行高=子元素文字的大小*父元素设置的行高值(先继承后计算)

自己可以通过浏览器查看相关属性值

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS之行高(line-height)详解 的相关文章

  • Docker专题(八)-Docker-Docker部署SpringBoot项目

    1 手工方式 1 1 准备Springboot jar项目 将项目打包成jar 1 2 编写Dockerfile FROM java 8 VOLUME tmp ADD elk web 1 0 SNAPSHOT jar elk jar EXP
  • PhpStorm最全攻略

    本教程主要内容的是日常开发 测试 部署工作流的一些技巧和工具配置方法 并尽量将最有用的部分提取出来并结合实际场景做介绍 而并不是仅仅对PhpStorm的功能的简单罗列 如果读者有改善的建议 可以在教程下方留言或直接与作者联系 共同促进内容的
  • 工具:npm/node版本更换(Windows版本) 含报错exit status 1报错,出现乱码的解决方法

    npm版本更换 更换指定版本 npm g install npm 6 14 11 更换最新版本 npm install g npm node版本更换 方法1 下载nvm https www runoob com w3cnote nvm ma
  • 腾讯业务百万数据 6s 响应,APIJSON 性能优化背后的故事

    最近发生了一件大事儿 APIJSON 再也不用担心被人质疑性能问题了哈哈 某周三腾讯 CSIG 某项目组 已经用 APIJSON 做完一期 突然反馈了查询大量数据性能急剧下降的情况 某张表 2 3KW 记录 用 APIJSON 万能通用接口
  • 【数据库-4】clinvar

    欢迎关注公众号 oddxix 如果觉得写的不错记得点个赞哦 留步看一下这个讲解视频吧 https v qq com x page m03789y9j98 html 搭配这个pdf食用更佳哦 https www clinicalgenome
  • 动态规划的实践

    一 动态规划要解决的问题 动态规划问题的一般形式就是求最值 动态规划其实是运筹学的一种最优化方法 只不过在计算机问题上应用比较多 比如说让你求最长递增子序列 背包问题呀等 只要我们发现某一过程包含多种状态 情况 后一种状态的生成依赖于前面的
  • 七天LLVM零基础入门(Linux版本)------第四天

    作者 snsn1984 第一步 复习 第三天的时候 我们学习了LLVM的编程指引 在开始第四天的学习之前 需要复习之前学习过的两篇文档 LLVM IR的文档 http llvm org docs LangRef html 编程指引文档 ht
  • 使用spyder3调试python程序的简明教程

    说是简明教程 其实是我自己尝试用spyder调试python程序的过程的一个记录 因为spyder的调试功能是基于pdb 而我又没有pdb的基础 所以刚开始上手时感觉很不习惯 而且那时我又很懒 没去找官方文档 仅仅在百度和csdn上找了找
  • 腾讯云被ddos攻击解决方案

    腾讯云是国内仅此次阿里云的云服务商 很多创业者都使用他们家云服务器 自然被DDOS攻击的也不少 今天来介绍下使用腾讯云服务器被DDOS攻击的解决办法 一 购买腾讯高防IP 也称腾讯大禹BGP高防IP 是一个运行在腾讯云内网的高防IP服务 适
  • nginx (1):ubuntu下安装启动nginx

    1 安装依赖 sudo apt get install gcc zlib1g dev libpcre3 libpcre3 dev libssl dev 2 下载nginx wget https nginx org download ngin
  • 【vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)】

    vue 页面下滚到目标元素的位置 目标元素自动吸顶 自动悬浮吸附到页面顶部 原文链接 https blog csdn net weixin 41192489 article details 112320596 1 监听页面滚动事件 监听页面
  • xxl-job(2.4.1)使用spring-mvc替换netty的功能

    xxl job 2 4 1 使用spring mvc替换netty的功能 1 xxl job core引入spring mvc的依赖
  • APP自动化测试-11.webview技术原理

    APP自动化测试 11 webview技术原理 文章目录 APP自动化测试 11 webview技术原理 前言 一 获取webview 二 根据webview启动chromedriver 总结 前言 根据日志 简单记录webview运行的机
  • Caffe 源码阅读笔记 [基本模块] Syncedmem & Blob

    syncedmem syncedmem管理一段大小为size的内存 这段内存可以从GPU或者主机内存分配 syncedmem负责GPU和主机内存之间的同步 如果数据是在GPU里而要从主机内存取出 syncedmem会先把数据从GPU内存me
  • 服务器怎么设置无线网络共享,无线路由器怎么设置usb网络共享管理

    众所周知 路由器长久以来一直是计算机网络的核心设备 其重要性不可低估 那么你知道无线路由器怎么设置usb网络共享管理吗 下面是学习啦小编整理的一些关于无线路由器设置usb网络共享管理的相关资料 供你参考 无线路由器设置usb网络共享管理的方
  • 实现一个简单的二叉树

    实现一个简单的二叉树 语言 Objective C 整体上还是挺简单的 所以就直接上代码了 1 二叉树 由 节点 和 枝干 组成 且每个节点最多只有两个子节点的树形数据结构 2 代码实现 2 1 节点类 创建一个简单的节点类 这个类可以保存
  • Chatopera王海良:大厂螺丝钉还是开源极客?年轻技术人如何选择?

    他因为追求创新毅然放弃了大厂稳定的工作 参与开源并成立了开源商业公司 他相信 开源可以极大地助力开发者成长 那么 对于年轻开发者而言 如何通过参与开源实现跳跃式发展 本期 开源访谈录 邀请到了Chatopera CEO王海良来分享他的见解
  • 手把手教会你用Python爬虫爬取网页数据!!

    其实在当今社会 网络上充斥着大量有用的数据 我们只需要耐心的观察 再加上一些技术手段 就可以获取到大量的有价值数据 这里的 技术手段 就是网络爬虫 今天就给大家分享一篇爬虫基础知识和入门教程 什么是爬虫 爬虫就是自动获取网页内容的程序 例如
  • IAR编译错误

    1 错误提示 Error e104 Failed to fit all segments into specified ranges Problem discovered in segment XDATA N Unable to place

随机推荐