插入图片，图片自带下边距解决方式

今天在做东西时发现插入图片后，图片自带下边距，随手记录一下。

我们可以明显看见图片与下边框之间有距离，那么怎么 解决这个问题呢？
首先我们应该分析一下为什么会出现这样的情况：那是因为图片是行内元素，所以我们第一种方式可以将图片变为块级元素。
第一种方式：

    <div class="border">
        <img src="1.jpg" alt="">
    </div>

    .border{/*用来给图片加边框的*/
            border: 1px solid #000;
            display: inline-block;
            background: #6ff;
        }
    img{
            display: block;
        }

第二种方式（行内元素属性的vertical-align的默认值是baseline，将图片的垂直居中方式改为middle）：

    <div class="border">
        <img src="1.jpg" alt="">
    </div>

    .border{/*用来给图片加边框的*/
            border: 1px solid #000;
            display: inline-block;
            background: #6ff;
        }
    img{
            vertical-align: middle;
        }

第三种方式（将img的父级的字体大小设置为0）：

    <div class="border">
        <img src="1.jpg" alt="">
    </div>

    .border{/*用来给图片加边框的*/
            border: 1px solid #000;
            display: inline-block;
            background: #6ff;
            font-size:0;
        }

第四种方式（给img的父级设置高度同图片高度一致）：

    <div class="border">
        <img src="1.jpg" alt="">
    </div>

    .border{/*用来给图片加边框的*/
            border: 1px solid #000;
            display: inline-block;
            background: #6ff;
            height: 150px;/*此处我用的图片为宽高各为150px*/
        }

第五种方式（给图片设置左浮动）：

    <div class="border">
        <img src="1.jpg" alt="">
    </div>

    .border{/*用来给图片加边框的*/
            border: 1px solid #000;
            display: inline-block;
            background: #6ff;
            height: 150px;/*此处我用的图片为宽高各为150px*/
        }
    img{
            float: left;
        }

这几种方式都可解决图片下边距的问题，至于选择哪种更为合适，自己视情况而定。