最近遇到了关于基准线的问题,仔细查阅资料发现大有文章。
先来看下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
正常展示,没任何问题;
问题来了,给第一个盒子添加一行内容:结果变成了如下的样子
仔细研究发现,其实这有关基准线问题,此时使用vertical-align属性,来更改默认基准线baseline为bottom:
<style>
div {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid red;
/*表示以元素底部为基准线*/
vertical-align: bottom;
}
</style>
此时得到正常展示结果:
总结:
对于vertical-align,其设置的是行内元素对齐方式样式,即当display为inline, inline-block等时,默认为baseline;
基线位置不固定:
- 对于文本类型内联元素,基线是文本底部边缘
- 对于替换元素如img,input等元素,基线是元素下边缘
- 对于Inline-block,分为:
1.如果该元素有内联元素,基线就是最后一行的下边缘
2.如果没用内联元素,基线就是元素加上margin之后的下边缘