1. 垂直对齐方式

文字垂直居中称为文字顶部对齐或底部对齐；
vertical-align 属性，该属性用来定义垂直对齐方式；
该属性定义行内元素的基线相对于该元素所在的基线的垂直对齐，允许指定负长度值和百分比值，这会让元素降低而不是升高；
在单元格中，这个属性会设置单元格框中的单元格内容的对齐方式；
语法格式如下所示：

{vertial-align:属性值}

202205603 例子 1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直对其方式</title>
	</head>
	<body>
		<p>
			世界杯<b style="font-size: 8pt;vertical-align: super;">2022</b>!
			我看行<b style="font-size: 8pt;vertical-align: sub;">【注】</b>!
			加油！<img src="6.gif" width="50px" height="50px" style="vertical-align: baseline;"/>
		</p>
		<hr />
		<p><img src="3.jpg" width="50px" height="50px" style="vertical-align: middle;">
		世界杯！我看行！加油！<img src="3.jpg" width="50px" height="50px" style="vertical-align: top;"/>
		</p>
		<hr />
		<p><img src="3.jpg" width="50px" height="50px" style="vertical-align: middle;"/>
			世界杯！我看行！加油！<img src="3.jpg" width="50px" height="50px" style="vertical-align: text-top;"/>
		</p>
		<p><img  src="3.jpg" width="50px" height="50px" style="vertical-align: middle;"/>
			世界杯！我看行！加油！<img  src="3.jpg" width="50px" height="50px" style="vertical-align: bottom;"/>
		</p>
		<hr />
		<p><img src="3.jpg" width="50px" height="50px" style="vertical-align: middle;"/>
			世界杯！我看行！加油！<img  src="3.jpg" width="50px" height="50px" style="vertical-align: text-bottom;"/>
		</p>
		<p>
			世界杯<b style="font-size: 8pt;vertical-align: 100%;">2022</b>！
			我看行<b style="font-size: 8pt;vertical-align: -100%;">[注]</b>！
			加油！<img src="3.jpg" width="50px" height="50px" style="vertical-align: baseline;"/>
		</p>
	</body>
</html>

20220503

2. 文本缩进

在段落中，通常用首行缩进两个字符表示这是一个段落的开始；
通过 text-indent 属性能设定文本块的首行缩进；
语法格式如下所示：

text-indext:length

length 属性表示有百分比数字或由浮点数字和单位标识符组成的长度值，允许为负值；
text-indent 属性可看成能定义两种缩进方式，一种是直接定义缩进的长度，另一种是定义缩进百分比；
用该属性，HTML 的任何标记都能让首行以给定的长度或百分比缩进；

例子 2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本缩进</title>
	</head>
	<body>
		<p style="text-indent: 15mm;">此处直接通过定义长度进行缩进。</p>
		<p style="text-indent: 20%;">此处使用百分比进行缩进。</p>
	</body>
</html>

20220503 注意： 若上级定义了 text-indent 属性，子标记能继承上级标记的缩进长度；

3. 文本行高

line-height 属性，用来设定行间距，即行高；

line-height:normal | length

20220503 例子 3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本行高</title>
	</head>
	<body>
		<div style="text-indent: 15mm;">
			<p style="line-height: 45px;">
				世界杯（World Cup,FIFA World Cup)，国际足联世界杯，世界足球金杯赛）是世界上最高水平的足球比赛，与奥运会、F1并称为全球三大顶级赛事。
			</p>
			<p style="line-height: 55%;">
				世界杯（World Cup,FIFA World Cup)，国际足联世界杯，世界足球金杯赛）是世界上最高水平的足球比赛，与奥运会、F1并称为全球三大顶级赛事。
			</p>
		</div>
	</body>
</html>

20220503

原文链接：https://blog.csdn.net/weixin_43960383/article/details/125267474