使得外层div完全包住img

代码

<div class="test">
      ![](images/pic_160.png)
</div>

.test {
    border: 1px solid #1aad19;
    img {
        width: 60px;
        height: 60px;
    }
}

效果如下，外层div并没有完全包住里面的img

image.png

方法一：将img设置为block

.test {
    border: 1px solid #1aad19;
    img {
        width: 60px;
        height: 60px;
        display: block;
        margin: 0 auto;
    }
}

image.png

方法二：将img的vertical-align设置为middle或top

.test {
    border: 1px solid #1aad19;
    text-align: center;
    img {
        width: 60px;
        height: 60px;
        vertical-align: middle;
    }
}

image.png

方法三：外层div设为flex

.test {
    border: 1px solid #1aad19;
    display: flex;
    justify-content: center;
    img {
        width: 60px;
        height: 60px;
    }
}

image.png