小程序text组件内部上边距的问题

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

index.wxml：

<view class="slogan">
<text>
建立跨文化的全球视野，做世界公民
</text>
</view>

index.wxss：

.slogan{
padding:19rpx 0;
background-color: #39B371;
text-align: center;
color:#FFFFFF;
}
.slogan>text{
font-size:20rpx;
line-height: 20rpx;
}

效果：

明显看到上边距多了，我们将text设置为block块：

.slogan>text{
font-size:20rpx;
line-height: 20rpx;
display: block;
}

检查下来发现text有个内边距。

这个问题，解决也很简单，就是text内容不要写成几行，一行就可以了：

<view class="slogan">
<text>建立跨文化的全球视野，做世界公民</text>
</view>

对，就是这么简单。

题外话，text更像h5里面的span而不是p，并不是一个块级元素。