<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
border: 1px solid deeppink;
font-size: 0;
}
.box img{
vertical-align: text-bottom;
}
.box1{
width: 200px;
border: 1px solid red;
line-height: 200px;/* 设置支柱的高度 撑开盒子 */
font-size: 0;/* 把支柱的大小变为0 */
text-align: center;/* 设置文字水平居中 */
}
.box1 img{
vertical-align: middle;/* 设置文字中线对齐 */
}
</style>
</head>
<body>
<div class="box">
<img src="img/3.jpg" alt="">
</div>
<div class="box1">
<img src="img/1.jpg" alt="">
</div>
<!--
支柱&&幽灵节点
在computed中查看默认为
vertical-align:baseline;就是英文本的第三条线
消除方式1 font-size: 0;
2 vertical-align: baseline;除了这个属性值都可以
对于浏览器来说
display:inline / inline-block都是文字
以后就不要用height,直接用line-height撑开盒子
vertical-align 设置文字与父元素行框盒子的垂直对齐方式
baseline 基线对齐
middle 与字母x的交叉位置对齐
top/bottom line-height的顶部/底部
text-top/text-bottom 文本的顶部/底部
px 举个例子 1px 表示相对于基线向上1px 上正下负
% 相对于自身inline-height的百分比
-->
</body>
</html>
Python3Turtle