CSS行高
最编程
2024-02-15 17:10:39
...
<!DOCTYPE html>
<html>
<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>inline</title>
<style>
span {
background: red;
}
/* 行高不决定元素本身的高度 */
/* 这里的span元素的高度是由字体的大小决定的，所以这里的span元素的height是17px */
/* 但是行高决定了包含元素的父级元素的高度，所以看到包含span元素的div的高度是30px，是由最大的c3的line-height决定的。 */
/* 另外，如果界面比较小，可以看到div的高度会变化，如果包含了2行，那么是由每一行的line-height最大的相加决定的 */
/* 如果父级加了height，那么父级的height就不由内部元素的line-height决定了 */
.c1 {
line-height: 20px;
}
.c2 {
line-height: 8px;
}
.c3 {
line-height: 30px;
}
.c5 {
line-height: 28px;
}
</style>
</head>
<body>
<div>
<!-- 有4个span和一个文本，都是inline元素，inline元素组成的box叫作line box -->
<span class="c1">inline box xfg中文</span>
<span class="c2">inline box</span>
<span class="c3">inline box</span> inline box
<span class="c5">inline box</span>
</div>
</body>
</html>
推荐阅读
-
企业级项目实战品达物流TMS（资料齐全）SpringCloud+SpringBoot+Vue+Mybatis-Plus+Docker19套JAVA企业级大型项目实战前后端分离/微服务/云原生/分布式/高并发/高可用/中间平台策略项目架构、百亿级项目实战、金融项目实战JAVA项目、物联网项目、项目面试实战、秒杀项目实战、租房项目实战、在线教育项目实战、权限系统实战、股票交易项目、短信平台实战、房源平台项目实战、工作流项目实战。
-
家庭*行（一）：从密西西比州到佛罗里达州
-
江西省生态环境厅关于做好2024年工程系列生态环境工程高、中级职称申报工作的通知
-
高省、好省、粉象生活、氧惠、高佣联盟、美逛哪个佣金高？
-
淘宝联盟和淘宝客联盟的区别，哪个佣金高？
-
高佣金联盟是做什么的？高佣金联盟由哪家公司运营？
-
单元化促进高可用性架构演进
-
高存氧 惠存客盟 Bimaru Goodies Express 全球海淘返利 妈妈田田 买家直返 朵拉生活
-
[计算机基础] 简明扼要地解释高字节和低字节 I. 简要解释 II.高字节和低字节在 C 语言中的含义 III.16 位和 32 位数字的存储
-
HTML/CSS 开关切换（包括选中选项的 JS 控制）