第125天：移动端-空白字符问题解决办法
1、当我们想使用百分比来进行两个盒子的并排
代码：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <style>
6 html,
7 body {
8 margin: 0;
9 padding: 0;
10 }
11
12 .container {
13 width: 1024px;
14 height: 2000px;
15 margin: 0 auto;
16 }
17
18 .container > div {
19 display: inline-block;
20 }
21
22 .left {
23 width: 80%;
24 height: 100%;
25 background-color: #ff0;
26 }
27
28 .right {
29 width: 20%;
30 height: 100%;
31 background-color: #00f;
32 }
33 </style>
34 </head>
35
36 <body>
37 <div class="container">
38 <div class="left"></div>
39 <div class="right"></div>
40 </div>
41 </body>
42 </html>当我们想通过inline-block让两个div来并排，一个战父盒子的80%，一个占20%。可能看起来刚好100%，但是会由于代码中左右两个盒子之间的空白字符会导致右边的盒子掉下来。
2、解决办法
（1）消除空白字符
让左右两个盒子的代码紧密连起来，就是不要让他们中间有空白字符
（2）给父盒子添加属性font-size:0;来消除空白字符，推荐使用此方法
3、字母间距和单词间距
字母间距——letter-spacing
单词间距——word-spacing
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2017-12-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
