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,并不是一个块级元素。

小程序text组件内部上边距的问题的更多相关文章

  1. 微信小程序_(组件)icon、text、rich-text、progress四大基础组件

    微信小程序基础组件官方文档 传送门 Learn 一.icon图标组件 二.rich-text富文本组件 三.text文本组件 四.progress进度条组件 一.icon图标组件 type:icon的 ...

  2. 微信小程序自定义组件的使用以及调用自定义组件中的方法

    在写小程序的时候,有时候页面的内容过多,逻辑比较复杂,如果全部都写在一个页面的话,会比较繁杂,代码可读性比较差,也不易于后期代码维护,这时候可以把里面某部分功能抽出来,单独封装为一个组件,也就是通常说 ...

  3. 微信小程序弹窗组件

    概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demoda ...

  4. 小程序web-view组件

    不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件.   1,web-view这个组件是什么鬼? 官网的介绍: ...

  5. 小程序input组件获得焦点时placeholder内容有重影

    这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='i ...

  6. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

  7. [转]小程序web-view组件

    本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...

  8. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

  9. 微信小程序_(组件)scroll-view可滚动视图

    微信小程序scroll-view组件官方文档 传送门 提前准备:使用<view>组件制作五条撑满的横向区域 <!--index.wxml--> Cynical丶Gary < ...

随机推荐

  1. [TS-A1505] [清橙2013中国国家集训队第二次作业] 树 [可持久化线段树,求树上路径第k大]

    按Dfs序逐个插入点,建立可持久化线段树,每次查询即可,具体详见代码. 不知道为什么,代码慢的要死,, #include <iostream> #include <algorithm ...

  2. [网络流24题#9] [cogs734] 方格取数 [网络流,最大流最小割]

    将网格分为两部分,方法是黑白染色,即判断(i+j)&1即可,分开后从白色格子向黑色格子连边,每个点需要四条(边界点可能更少),也就是每个格子周围的四个方向.之后将源点和汇点分别于黑白格子连边, ...

  3. springCloud学习-分布式配置中心(Spring Cloud Config)

    1.简介 Spring Cloud Config :分布式配置中心,方便服务配置文件统一管理,它支持配置服务放在配置服务的内存中(即本地),也支持放在远程Git仓库中.在spring cloud co ...

  4. sqlyog

    https://github.com/webyog/sqlyog-community/wiki/Downloads

  5. Workflow:实现一个简单的审批流程

    1. 创建一个空白的项目,在其中创建Host – Windows Console Application,Client – Windows forms Application和DataExchange ...

  6. 使用Linq 查询数据 构建对象 select new{}

    linq 查询数据 /// <summary> /// 汽车品牌及车型 /// </summary> /// <returns></returns> p ...

  7. Universal-Image-Loader(android图片缓存)

    转载请注明http://write.blog.csdn.net/postedit?ref=toolbar 点击下载所需jar文件 具体资料整理请加群284568173自行下载pdf 项目介绍: And ...

  8. luogu2770 航空路线问题 网络流

    题目大意: 给定一张航空图,图中顶点代表城市,边代表 2 城市间的直通航线.现要求找出一条满足下述限制条件的且途经城市最多的旅行路线.(1)从最西端城市出发,单向从西向东途经若干城市到达最东端城市,然 ...

  9. Getting Installation aborted (Status 7) ApplyParsePerms: lsetfilecon of /syst...【转】

    OTA升级失败:原文http://en.miui.com/thread-112197-1-1.html Do you get this "Status 7" error in Re ...

  10. spring:按照Bean的名称自动装配User

    本实例将介绍如何按照Bean 的名称自动装配 User 对象! <bean> 元素的 autowire 属性负责自动装配 <bean> 标签,定义 JavaBean 的属性.这 ...