标签：两种 net 显示 red 代码 效果 alt margin padding
html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），这个大家都知道，那什么是两个盒模型之间的空隙呢？该怎么清除它呢？
假设有一个class为content的父div，里面包含两个子div，这两个子div要同一行显示，我们想要两个子div紧紧连接在一起，所以把它们的margin和padding值全部设为0。
1 <style type="text/css"> 2 .red{ 3 display: inline-block; 4 margin: 0; 5 padding: 0; 6 width: 100px; 7 height: 100px; 8 background: red; 9 } 10 .green{ 11 display: inline-block; 12 margin: 0; 13 padding: 0; 14 width: 100px; 15 height: 100px; 16 background: green; 17 } 18 </style>
1 <div class="content"> 2 <div class="red"></div> 3 <div class="green"></div> 4 </div>
我们来看看结果
这时我们发现结果没有我们想象中那么美好，这是因为两个div之间还有些空白字符。我们有两种解决方法：
既然是空白字符的锅，我们就在父元素设置他们的font-size为0，或者，直接把空白字符删掉
1 .content{ 2 font-size: 0px; 3 }
1 .content{ 2 font-size: 0px; 3 } 4 .red{ 5 display: inline-block; 6 margin: 0; 7 padding: 0; 8 width: 100px; 9 height: 100px; 10 background: red; 11 font-size: 16px; 12 } 13 .green{ 14 display: inline-block; 15 margin: 0; 16 padding: 0; 17 width: 100px; 18 height: 100px; 19 background: green; 20 font-size: 16px; 21 }
1 <div class="content"> 2 <div class="red">空白</div><div class="green">字符</div> 3 </div>
标签：两种 net 显示 red 代码 效果 alt margin padding
原文地址：http://www.cnblogs.com/nangxi/p/7417127.html
