⼩程序text组件内部上边距的问题index.wxml:
<view class="slogan">
<text>
建⽴跨⽂化的全球视野,做世界公民
</text>
</view>
index.wxss:
.slogan{
text align centerpadding: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,并不是⼀个块级元素。