<!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>