问题

<view class="img-box">
    <image class="big-img" src="xxx"></image>
    <view class="small-box">
        <image src="xxx"></image>
        <image src="xxx"></image>
        <image src="xxx"></image>
    </view>
</view>

在使用image标签放入图片后发现，图片居然在下方多了一部分的空白，通过控制台也没有查出为什么；之后在一篇文章中得知：文本就会出现这类问题

原因

通过这张图可以得知，基线和基线的距离为行高；对于字母g和中文来说，下标会在基线下方到底线的位置显示，所以这一块留白的文本就是为了解析文本时多出来的显示下标的部分，且这个留白和字号有关。

而image在html中输入内联元素，被浏览器视为文本。

解决方法

• 设置父的font-size为0 .img-box{font-size: 0;}
• 设置image的展示方式为块状元素， image{display: block;}
• 设置image的垂直对齐方式为除baseline以外的值，image{vertical-align: top;}
• 设置float
• 用view包裹image，设置view的大小和image一样，然后设置 overflow: hidden

借鉴

为什么我的img标签下产生了多余的部分？