这个问题是开发中非常常见的问题，也就是多个行盒的垂直对齐。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input[type="checkbox"] {
            width: 30px;
            height: 30px;
        }
    </style>
</head>

<body>

    <input type="checkbox" name="" id="">测试

</body>

</html>


很显然，这个多选框和文字是没有对齐的。要实现对其，可以设置 vertical-align 属性。这个属性可以设置行盒垂直方向上的排列方式。

这个属性其实非常麻烦，作为入门教程，不需要这么麻烦，一般来说我们都希望和文字垂直居中，直接将要垂直居中的行盒设置 vertical-align:middle; ，即可完成垂直居中，有时候我们可以设置数值，一般在 chrome 控制台中设置一个合理的像素值，然后再应用即可。

接下来考虑一个问题，就是图片的底部白边

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            border: 1px solid;
        }

        img {
            width: 100px;
        }
    </style>
</head>

<body>

    <div class="container">
        <img src="https://pica.zhimg.com/v2-a2cf435954889a4be0c9210dc9d27247_r.jpg?source=1940ef5c" alt="">
    </div>

</body>

</html>


可以很明显的看到，图片底部是有白边的，读者可能会想到空白折叠，但实际上这并不是空白折叠的问题，这其实就是行盒的垂直排列的问题。

    <div class="container"><img src="https://pica.zhimg.com/v2-a2cf435954889a4be0c9210dc9d27247_r.jpg?source=1940ef5c"
            alt=""></div>


哪怕将源码中的空白字符删掉，也会出现白边问题。

图片的父元素是块盒，且高度自动，那么图片底部和父元素底边之间就会出现空白，读者可以去尝试一下，这个白边和字体大小成正相关，即字体大小越大，白边越大。要解决这个问题，有两种办法，要么设置父元素的字体大小为 0，要么设置图片 display:block;均可。