微信小程序 CSS 解决子元素图片在父元素div宽高小的时候超出div范围

今天写小程序的时候发现了这么个问题，在div内添加了图片，给div一个边框，然后我就发现我的图片不在div的范围内了，而是向下偏移了一点

html：

<view class="tel">
  <image src="/images/tel.png"></image>
</view>

css：

.container .content .person .per .tel {
  width: 30rpx;
  height: 30rpx;
  border: 1rpx solid #FF69B4;
}

.container .content .person .per .tel image {
  width: 100%;
  height: 100%;
}

之后我发现，我放图片的div是在父元素的顶部的

而图片却是向下偏移了

在查看预览样式的时候也没发现异常。

之后我突然想到是不是因为行高 line-height 的缘故，因为图片和文字是平行的。

然后我设置了一下

.container .content .person .per .tel {
  width: 30rpx;
  height: 30rpx;
  border: 1rpx solid #FF69B4;
  line-height: 0rpx;
}

发现问题就解决了

不过我也没有设置行高，在预览样式中也没有显示行高，可能是div自带的吧。反正是解决了