由两个span元素引发的问题

只是照着视频的内容对代码进行测试，没想到由于将div错写成span标签，引发出了这么多问题。算是意外收获了呢

解决方案参考网址:https://segmentfault.com/q/1010000008628181

解决方案中的word-spacing和letter-spacing没搞懂，后面参考大神的网站终于清楚了：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/

一、关于内联元素的几点思考

• 内联元素如果不转换为块级元素的话，设置背景颜色是不起作用的。

  width: 300px;
  height: 300px;
  background-color: green;

• 即使转换为块级元素，如果没有设置宽度和高度，设置背景颜色也是不起作用的。

  display: inline-block;
  background-color: green;

• 设置float也会将一个内联元素转换为块级元素。如下也是有效的。

  float:left;
  width: 300px;
  height: 300px;
  background-color: green;

二、关于布局问题的几点解决方法总结

### html
<div>
    <span class="span1"></span>
    <span class="span2"></span>
</div>
### css
*{
    margin: 0;
    padding: 0;
}
div{
    width: 600px;
    height: 600px;
    background-color: #fff;
    border: 1px solid green;
}
.span1{
    width: 300px;
    height: 300px;
    background-color: green;
    display: inline-block;
}
.span2{
    width: 300px;
    height: 300px;
    background-color: yellow;
    display: inline-block;
}

以上代码的效果并没有像我想象中那样，而是第二个span被挤下来了。这就奇怪了。没有margin,padding,border之类的，怎么会被挤下去呢？后经查阅资料得知，display为inline和inline-block的时候，当你代码换行后，会在网页上产生一个空格，真是任性。不过好在魔高一尺，道高一丈。解决方案还是有很多中的。

• 为父元素添加font-size:0属性，例如以上代码的话，在*或者div的style里面添加都可以

• 取消换行符，这种方法虽然可行，但是真的很影响美观和代码的可读性。

  ### 写法一
  <div>
      <span class="span1"></span
      ><span class="span2"></span>
  </div>
  ### 写法二
  <div>
      <span class="span1"></span><span class="span2"></span>
  </div>

• margin负值，具体的像素值可以在控制台去调试。当然了可以随便为哪个span设置margin负值都可以。

  ### 方法一：为span1设置margin值
  margin-right:-6px;
  ### 方法二：为span2设置margin值
  margin-left:-6px;

• float，可以为span添加float属性。当然了，可以选取其中一个设置float的left值或right值。当然了如果为左边的元素设置float的right值或者为右边的元素设置float的left值，虽然解决了换行的问题，但是原本的布局已经变化了。

  ### 方法一：为span1设置float值
  float:left;
  ### 方法二：为span2设置float值
  float:right;

• 为父元素设置word-sapcing为-6px;值的大小由控制台测试得来。

• 为父元素设置letter-sapcing为-6px;值的大小由控制台测试得来。
• 不过我有一点儿疑惑的是，对于以上两种方法，为什么word-spacing和letter-spacing是一样的，是因为我之间没有填写任何内容么？另外如果我填写了内容，我是不是也要对子元素的word-spacing和letter-spacing做设置呢？
• 根据测试，当我为子元素设置内容之后，确实也要同时为他们设置word-spacing和letter-spacing，不然内容会产生严重变形。只要添加一个word-spacing或者letter-spacing为0就可以了。