两个盒模型之间的空隙
2018-06-24 01:47:05来源：未知 阅读 ()
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.方法一：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 }
2.方法二：删除空白字符
1 <div class="content"> 2 <div class="red">空白</div><div class="green">字符</div> 3 </div>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：响应式web设计之@media
- css：盒子模型边框（边框、内外边距） 2020-06-03
- 两个div并排，右边div固定宽度，左边宽度自适应 2020-06-03
- 两个div并排，左边div固定宽度，右边宽度自适应 2020-06-03
- 5.盒模型 2020-05-23
- 弹性盒模型 2020-04-02
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
