小程序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,并不是一个块级元素。

原文地址:https://www.cnblogs.com/xiaochongchong/p/9035374.html