小程序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，並不是一個塊級元素。