小程序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