微信小程序 text 标签有上边距问题

背景

UI 还原发现没有给 text 设置上边距，却产生了上边距，与设计图有差距

代码

              <view class="time_wrap">
                <text class="active_time"
                  >最近活跃:
                  {{
                    item.lastLoginTime
                  }}</text>
                <text class="join_time"
                  >加入时间:
                  {{
                    item.joinInTime
                  }}</text>
              </view>

原因

行内元素多行书写会产生空白字符，导致有上边距的产生

解决方法：
方法一：

              <view class="time_wrap">
                <text class="active_time">最近活跃:{{item.lastLoginTime}}</text>
                <text class="join_time">加入时间:{{item.joinInTime}}</text>
              </view>

把行内元素的内容都写在同一行，不过这种方法局限性很大，在项目开发中，我们一般在项目中都配置了特定的格式化方法，比如：超过多少字符就换行。

方法二：

              <view class="time_wrap">
                <text class="active_time"
                  >最近活跃:
                  {{
                    item.lastLoginTime
                  }}</text>
                <text class="join_time"
                  >加入时间:
                  {{
                    item.joinInTime
                  }}</text>
              </view>
              .time_wrap{
                display:flex;
              }

给父元素加上 display:flex，原理其实就是把子元素变成块级元素，这样子就没有行内元素那个特性了。

在开发时，保证语义化的同时，也要注意标签特性带来的影响，不要为了语义化而无法准确还原设计稿。