div + css 布局中的一些小技巧去 除图片底部空白缝隙（四）

如上图，给div加了边框之后会发现 图片和div的底部有一点间隙，产生的原因是因为：图片默认是按照基线对齐的，不是按照底部对齐
解决这问题有两个办法
方法1：修改vertical-align属性， 只要不是按照基线对齐就不会有这个问题

	/* css */
        div {
            width: 200px;
            border: 3px solid skyblue;
        }
        img {
            vertical-align: middle;
        }

    <div>
        <img src="img/pic-1.png" alt="">
    </div>

效果
方法2：将img改为块级元素，因为块级元素是没有vertical-align 属性的，所以也不会存在这个问题

        /* css */
        div {
            width: 200px;
            border: 3px solid skyblue;
        }

        img {
            display: block;
        }

效果如图