如何消除div之间的间隙

<div>
            <div style="display: inline-block;background-color: #2f7dcd">1</div>
            <div style="display: inline-block;background-color: #2f7dcd">2</div>
            <div style="display: inline-block;background-color: #2f7dcd">3</div>
        </div>

原因:浏览器解析的时候,会把行内元素(包括行内块元素)之间的回车换行符解析成一定的间隙,间隙的大小跟默认的字体大小设置有关。

方法:其父元素加上font-size:0的属性,但是字体需要额外处理,如下。

<div style="font-size:0">
            <div style="font-size:14px; display: inline-block;background-color: #2f7dcd">1</div>
            <div style="font-size:14px; display: inline-block;background-color: #2f7dcd">2</div>
            <div style="font-size:14px; display: inline-block;background-color: #2f7dcd">3</div>
 </div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,695评论 1 45
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,508评论 0 5
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,042评论 1 4
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,068评论 0 0