行盒的垂直对齐

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对齐元素设置vertical-align，可以是预设值也可以是数值

    <input type="checkbox">
    <span>垂直居中XXXXX</span>

        input[type="checkbox"] {
            width: 50px;
            height: 50px;
            vertical-align: middle;
        }

图片的底部白边

图片的父元素是一个块盒，块盒高度自动，图片底部和父元素底边之间往往会出现空白。

    <div>
        <img src="./timg.jpg" alt="">
    </div>

        div {
            border: 2px dashed #333;
        }

        img {
            width: 500px;
        }

1. 设置父元素的字体大小为0（受限）

    <div>
        <img src="./timg.jpg" alt="">
    </div>

        div {
            font-size: 0;
            border: 2px dashed #333;
        }

        img {
            width: 500px;
        }

2. 将图片设置为块盒

    <div>
        <img src="./timg.jpg" alt="">
    </div>

        div {
            border: 2px dashed #333;
        }

        img {
            width: 500px;
            display: block;
        }