一个很神奇的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个很神奇的问题相关的知识，希望对你有一定的参考价值。
最近在学习H5移动应用开发，于是想模仿做一个淘宝APP，其中的一个页面需要做这样一个效果
代码比较多，我把这部分代码单独摘出来模拟一下，代码如下：
<style type="text/css">
*{margin: 0;padding: 0;}
.btn1,.btn2{height: 40px; border:0; padding:0 15px; line-height: 40px; color: #ffffff;}
.btn1{background-color: #14968C;}
.btn2{background-color: #2DACA1;}
</style>
<body>
<div>
<button class="btn1">加入购物车</button>
<button class="btn2">立即购买</button>
</div>
</body>
我把页面所有元素自带的样式全部清空了，然后设置了button的样式，看起来好像是没有问题的，但是运行结果如下图：
两个按钮中间总会有空隙，这个问题在网页开发的时候肯定也是存在的，只是在网页上空间比较大，中间多出这个空隙并不影响效果和美观，但是开发APP的时候就不一样了，多出这个空隙来内容就放不下了，布局就会乱套。我审查了好久，发现是代码中的换行和空格造成的，可以有以下几种解决方案，方案仅供参考，如果有大牛看到，可以批评指正哈。
第一种：最原始的做法（写出来的代码阅读性很差）
<div>
<button class="btn1">加入购物车</button><button class="btn2">立即购买</button><button class="btn1">加入购物车</button><button class="btn2">立即购买</button>
</div>
第二种：将两个button标签首尾相连：
<div>
<button class="btn1">加入购物车</button
><button class="btn2">立即购买</button>
</div>
第三种：在两个标签中间加注释：
<div>
<button class="btn1">加入购物车</button><!--
--><button class="btn2">立即购买</button>
</div>
第四种：在CSS样式中进行设置：首先给页面整体的font-size设置成0；然后在对需要设置字体大小的地方独立进行设置，比如在案例中就可以这样写
*{margin: 0;padding: 0;font-size:0}
.btn1,.btn2{height: 40px; border:0; padding:0 15px; line-height: 40px; color: #ffffff;font-size:15px}
以上是关于一个很神奇的问题的主要内容，如果未能解决你的问题，请参考以下文章