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

html中的空白字符问题的更多相关文章

  1. 转：XML 中的空白字符须知：xml:space

    了解 XML 空白字符的概念并掌握如何避免与之相关的问题的技巧. 2006 年 4 月发布 很多时候,您可能都没注意到,在 XML 中所做的更改影响着您访问 XML 文档中数据的方式.例如: < ...

  2. linux中的"空白字符"

    [参考这个c语言中的空白字符文章] (http://blog.csdn.net/boyinnju/article/details/6877087) 所谓: linux中的"空白字符" ...

  3. Python中删除空白字符

    主要参考 Stackoverflow答案总结. 空白字符一般指以下几种字符: space,tab, linefeed, return, formfeed, and vertical tab中英文对照表 ...

  4. [Eclipse配置] Eclipse代码中显示空白字符（空格，TAB和回车）的方法

    在代码页面点击右键进入 Preferences --> General --> Editors --> Text Editors. 在 Show whitespace charact ...

  5. Java 去除字符串中的空白字符

    通过String的trim()方法只能去掉字符串两端的空格字符,但是对于\t \n等其它空白字符确不能去掉,因此需通过正则表达式,将其中匹配到的空白字符去掉,代码如下: protected Strin ...

  6. 从String中移除空白字符的多种方式！？

    字符串,是Java中最常用的一个数据类型了.我们在日常开发时候会经常使用字符串做很多的操作.比如字符串的拼接.截断.替换等. 这一篇文章,我们介绍一个比较常见又容易被忽略的一个操作,那就是移除字符串中 ...

  7. 如何用perl将表格中不同列的数据进行拼凑，然后将拼凑后的数据用“|”连接在一起

    最近写了一个perl脚本,实现的功能是将表格中其中两列的数据进行拼凑,然后将拼凑后的数据用“|”连接在一起. 表格内容如下: 员工号码 员工姓名 职位 入职日期 1001 张三 销售 1980/12/ ...

  8. 软件测试人员必备Linux命令（初、中、高级）

    有些技能可以事半功倍,有些命运掌握在我们手中.熟练的掌握和使用这些命令可以提高工作效率,并且结合这些命令对测试过程中遇到的问题进行一些初步的定位. 1 目录与文件操作1.1 ls(初级)使用权限:所有 ...

  9. linux运维中的命令梳理（二）

    回想起来,从事linux运维工作已近5年之久了,日常工作中会用到很多常规命令,之前简单罗列了一些命令:http://www.cnblogs.com/kevingrace/p/5985486.html今 ...

随机推荐

  1. java模式:模板模式的简单理解

    1.模板模式就是用虚类作为基类将几个要执行差不多操作中相同的部分提取出来,不同的部分各自实现! 2.下面给出简单栗子: 我要进行的操作是将大象和狐狸放入冰箱,放入大象和狐狸有相同的步骤:开冰箱和关冰箱 ...

  2. Hibernate 系列教程8-复合主键

    复合主键 复合主键的意思就是2个字段同时为主键 不使用无业务含义的自增id作为主键 Airline package com.jege.hibernate.compositeid; import jav ...

  3. android-misc-widgets四向（上下左右）抽屉bug修复版－－转载

     android-misc-widgets四向(上下左右)抽屉bug修复版 2013-08-04 08:58:13 标签:bug down top panel slidingdrawer 原创作品,允 ...

  4. partial 函数

    函数的partial应用 函数在执行时,要带上所有必要的参数进行调用.但是,有时参数可以在函数被调用之前提前获知.这种情况下,一个函数有一个或多个参数预先就能用上,以便函数能用更少的参数进行调用. 例 ...

  5. offset获取位置

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. ubuntu 12.04 安装snort acidbase相关注意事项

    一.安装Snort 1.安装libpcap 1 apt-get install libpcap-dev 2.安装snort 1 2 apt-get install snort apt-get inst ...

  7. MaterialWidgetLibrary 学习

    studio项目地址:https://github.com/keithellis/MaterialWidget 修改后的eclipse项目地址: 修改后的eclipse项目 Demo地址: activ ...

  8. STM32F2系列时钟的配置

    前一节详细介绍了系统默认的时钟配置,及各路时钟输出是多少,这是默认配置的,但实际使用的时钟默认的时钟并不符合要求,所以就得知道如何调用库函数进行配置. 最好的资料就是查阅stm32f2xx_rcc.c ...

  9. hdu_5691_Sitting in Line(状压DP)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5691 题意:中文,不解释 题解:设dp[i][j]表示当前状态为i,以第j个数为末尾的最忧解,然后dp ...

  10. Struts2 程序步骤

    1. 新建一个web project, 手动导入包: D:\Java\jar\struts-2.3.24.1\apps\struts2-blank\WEB-INF\lib copy到 WEB-INF/ ...