inline-block之间的空隙

当我们使用"display:inline-block"把块集元素转换为内联元素时,每两个内联元素之间有一定的空隙,既不是margin也不是padding,最终发现是由于换行符、制表符(tab)、空格等字符引起的。
解决方案:
1、第一种,不换行
既然是换行产生的,那么我们不换行就是了。所以第一种办法就是把所有的代码都写到一行,便不会产生空隙了。

<el-aside class="aside">Aside</el-aside><el-main class="main">Main</el-main>

2、改变font-size
这个换行是字符吧,那么我们把字体大小改为0,他便不会产生了。 设置其父容器的font-size为0,再设置内联元素的字体大小。
3、添加注释

 <el-aside class="aside">Aside</el-aside><!--
    --><el-main class="main">Main</el-main>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,178评论 0 0
  • day01­_起源和结构 结构:Xhtml xml 表现:CSS 行为:DOM ECMAScript 以上都属于W...
    Sakura_明妃阅读 1,262评论 0 1
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,520评论 0 5
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 2,080评论 1 4
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,628评论 0 7