两个div之间有间隔的解决办法

今天在练习九宫格的时候发现一个宽度为450px的父级div不足以放下三个宽度均为150px的子div，一开始十分郁闷，然后尝试给所有子div一个不同的background-color，发现两个子div之间存在小间隔，忽然意识到是浏览器将html的换行符（回车）、空格tab键全都当做空格进行渲染。怎么办呢？

解决办法：给子div加上

float: left；

问题解决。

九宫格练习代码献上

  
  
  
  
  


  

    

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9
    
  
  

/**********CSS预设样式**********/
* {/*清除页面中标签自带的外间距和内填充*/
  margin: 0;
  padding: 0;
}
ul, li {/*清除ul自带的列表符*/
  list-style: none;
}
a {/*去掉a自带的下划线*/
  text-decoration: none;
}
img {/*去掉img自带的边框<当图像加上a标签后，IE浏览器在不去除图像边框时会显示边框>*/
  border: none;
}
html {
  height:100%;
}
body {
  min-height: 100%;
  position: relative;
}
.main {/* main的padding-bottom值要等于或大于footer的height值 */ 
  padding-bottom: 100px;
}
.main .container {
  width: 450px;
  height:450px;
  background: #333;
}
.main .container .box {
  width:150px;
  height:150px;
  display: inline-block;
  text-align: center;
  line-height: 150px;
  float: left; /*解决浏览器将 换行符、空格、tab当做空格处理而使得div之间出现间隔的现象*/
}
/*9宫格颜色*/
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: rgb(43, 112, 241);
}
.purple {
  background-color: purple;
}
.greenBlue {
  background-color: #00ccff;
}
.pink {
  background-color: pink;
}
.yellowGreen {
  background-color: yellowgreen;
}
/*页脚*/
.footer {
  position: absolute;
  height: 100px;
  width: 100%;
  bottom: 0;
  background: #777;
}