文本和字体之间有什么区别呢？简单而言，文本是内容，而文字是用于显示内容的。
6.1 缩进和行内对齐
块级方向指当前书写模式放置块级元素的方向。
行内方向指块级元素中行内元素的书写方向。
6.1.1 缩进文本
CSS 借助 text-indent 属性缩进文本。
text-indent 属性把元素第一行的文本缩进指定长度，缩进的长度可以是负值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p{text-indent: -3em;}
p:nth-child(2){text-indent: 3em;}
p:nth-child(3){text-indent: 3em;}
</style>
</head>
<body>
<p>这个属性通常用于缩进段落的第一行，并且此属性可以用在任何块级元素上，缩进将沿着行内方向展开。</p>
<p>text-indent 属性不能用于行内元素或置换元素（如图像）。然而，如果图像在块级元素的第一行，它将随着行中的其他文本一起移动。</p>
<p><img src="D:\Students\imgs\喵喵.png">我歌且谣</p>
</body>
</html>
如果想要“缩进”行内元素的首行，可以通过内边距或外边距实现。
text-indent 属性的值可以使用任何长度单位，包括百分数。要注意，文本缩进只影响元素的第一行，且 text-indent 会继承。
6.1.2 文本对齐
text-align 控制元素中各文本行的对齐方式。取值：start、end、left、right、center、justify、match-parent、start end 。适用于块级元素。
从左至右书写的语言，text-align 默认值是 left 。起边是左边。
从右至左书写的语言，默认值是 right 。起边是右边。
对纵向书写的语言，left 和 right 分别对应起边和终边。
center 使元素中的各行文本居中对齐，与<center> 的区别是，<center>元素不仅影响文本，还会把整个元素居中显示。而text-align 不控制元素的对齐方式，只影响文本。
起边和终边对齐：
默认值是 start ，意思是文本与元素所在行框的起边对齐。（竖写语言中，根据书写方向，可能是顶边或底边）。
end 把文本框与行框的终边对齐。
两端对齐：
justify：两端对齐的文本，一行的两端都与父元素的边界对齐。
与父元素一致：
text-align：match-parent; 作用是让元素的对齐方式与父元素保持一致。但是浏览器不支持，而且功能基本被 inherit 覆盖了。
对齐最后一行：
text-align-last 属性，设置最后一行文本的对齐方式。取值 auto、start、end、left、right、center、justify。 auto是默认值。
其实，只要一行后面有强制换行，不管是不是在元素的末尾，都算最后一行。
而且，如果元素的第一行也是最后一行，text-align-last 的优先级比 text-align 高。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
div{text-align-last: center;}
div:last-child{text-align-last: left;}
div:last-child{text-align: center;}
</style>
</head>
<body>
<div>
111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111（换行符的前一行也会被认定我最后一行）<br>
2222222222222222222222222222222222222222222222222222222222222
</div>
<div>
文本向left 一侧靠近，因为text-align-last 的优先级比 text-align 高。
</div>
</body>
</html>
6.2 块级对齐
6.2.1 行的高度
line-height 属性指行的基线之间的距离，与字号无关。决定着元素所在方框的高度是增还是减。
line-height 控制的是行距，是除字体高度之外在文本行上方的额外空间。也就是说，line-height 的值与字体高度之差就是行距。
行的构成
文本行中的每个元素构成一个内容区，其高度由字体的高度决定。
随内容区出现的是一个行内框。如果不考虑其他因素，其高度与内容区完全相等。
line-height 导致的行距是影响行内框高度的因素之一。
元素的行距等于 font-size 的计算结果减去 line-height 的计算结果。这个值是行距的总值。注意，行距可能为负数。（即，行距 = font-size - line-height ？？看图不应该是line-heighe - font-size = 行距吗？）
行距分为两半，分别放到内容区的上部和下部。
算上行距，得到的就是元素的行内框。（即，上行距 + 下行距 = 行内框）
line-height 属性，默认值是 normal ，此时行之间的空间由用户代理计算。
同时也可以是长度量（如px, cm），在多数情况下首选纯数字，即设定一个换算系数，这样不会在继承时产生不确定的结果。
em 、 ex 和百分数相对元素的 font-size 值计算。
行高的继承：
块级元素之间的继承的行高有点复杂。从父元素继承line-height 值时，根据父元素的字号计算，而不根据子元素计算。
使用纯数字时，继承的将是设定的换算系数，而不是计算得到的值。纯数字将应用到当前元素及其所有子元素上，因此各元素的行高将根据自身的字号计算。
即纯数字是基于元素本身font-size 的倍数。如：font-size: 10px; line-height: 2; 则行高为 10px 乘以 2 等于 20px。并且会继承到子元素上。
设定 line-height 后，看起来额外的控件是平均增加到文本行的上部和下部的，但其实，额外的空间是增加到行内元素的内容区上部和下部的（或从内部区上部和下部减去），最终得到行内框。
6.2.2 纵向文本对齐
vertical-align 属性设置文本纵向对齐，用于行内元素和置换元素（例如图像和表单输入框）。（该属性不继承，适用于行内元素和单元格。）
取值： baseline、sub、super、top、text-top、middle、bottom、text-bottom、<length> 、 <percentage> 。
用在单元格上时，只能取值：baseline、top、middle、bottom 。
默认值是 baseline 。
基线对齐：
vertical-align: baseline; 强制元素的基线与父元素的基线对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
/* 基线对齐 */
div{
width: 200px;
height: 200px;
font-size: 36px;
border: 1px solid red;
}
span{/* vertical-align: baseline 默认值 */
font-size: 12px;
}
</style>
</head>
<body>
<div>123
<span>456</span>
</div>
</body>
</html>
上标和下标：
vertical-align: sub; 把元素放在下标处，即元素的基线（对置换元素来说是底边线）低于父元素的基线。
super 的作用与sub 相反，让元素的基线（或置换元素的底边线）高于父元素的基线。
标签：10,行内,--,text,align,元素,对齐,文本,文本属性 From： https://www.cnblogs.com/wgqy/p/17069587.html