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

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

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

index.wxml：

1 2 3 4 5

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

 

index.wxss：

1 2 3 4 5 6 7 8 9 10

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

 

效果：

 

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

1 2 3 4 5

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

　　

 

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

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

1 2 3

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

 

对，就是这么简单。

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