消除inline-block产生的间隙

原创 2018年04月16日 15:03:42

在水平对齐方法中display inline-block是一种很方便的方法,但是使用时会有一点小瑕疵。

当子元素标签与标签之间存在空格:

<div class="box">
    <div class="box1">盒子一</div>
    <div class="box2">盒子二</div>
</div>

则两个盒子之间会产生间隙,如下:

方法一:

既然间隙是由于标签之间的空格,那最简单的方法就是删除空格了,但在实际代码编写中,为了代码的可读性,我们更喜欢保留空格。

方法二:

父级元素加letter-spacing:-0.5em;这样子元素的间距就消除了,但是由于继承性,子元素里面的内容也会继承该该属性,子元素里面的内容也会缩小间距:

 

只需在子元素中添加letter-spacing: normal;消除父级盒子的影响:


方法三:

给父盒子加上font-size:0;子元素加上里面文本的字体大小,例如:font-size:14px;


这是由于字体大小为0,文字消失;子元素加上字体后:


css中display属性inline,block,inline-block详解

做了很多项目,但是发现css中display属性仍然没有搞清楚是怎样的,今天专门发一篇博文来总结以下。 首先讲一下它们之间的共同点:都可以控制line-height 1.block:将目标元素变为块...
  • a3025056
  • a3025056
  • 2016-09-07 16:40:49
  • 295

浏览器兼容性问题

JavaScript 1.HTML对象获取问题 FireFox:document.getElementById(“idName”); ie:document.idname...
  • like_jack
  • like_jack
  • 2016-11-02 16:26:38
  • 84

去掉inline-block产生的间隙

在上一篇《浅谈IE6/7对inline-block的支持》中,我们可以明显的看到各个内部之间产生了多余的间隙,查了资料说是折行产生的空白符,取消掉这些间隙对于现代浏览器来说是轻而一举的是,只需在父元素...
  • u012322734
  • u012322734
  • 2014-03-18 14:39:52
  • 1216

inline-block布局产生间隙的原因及解决办法(水平、垂直)

布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性,这使得display:inline-block属性的使用非常自由,可与文字,...
  • gladys_1111
  • gladys_1111
  • 2017-08-16 22:18:43
  • 237

Div+Css 常用样式全面整理

一、 善用css缩写规则 /*注意上、右、下、左的书写顺序*/ 1. 关于边距(4边): 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px (省略的左等于右) 1p...
  • Cqh52306
  • Cqh52306
  • 2013-08-09 09:36:37
  • 968

前端笔试面试中的常用知识点总结(CSS)

1、CSS选择器的优先级 !important > 内联 > id选择器 > 类选择器 > 标签选择器 多个类选择器叠加(256)之后的优先级大于一个id选择器 !imp...
  • lloyvhe
  • lloyvhe
  • 2015-11-29 17:14:27
  • 574

解决inline-block引起的空白间距问题

当我们在对元素的display属性使用inline-block值时,会在元素间形成一定宽度的空白间距。   下面看一下源代码: inline-block li{ display:inli...
  • annsheshira23
  • annsheshira23
  • 2015-08-18 21:35:16
  • 1371

去除inline-block元素间间距,比较靠谱的两种办法

1.使用注释符号1 1234楼主对代码
  • eaglewyy
  • eaglewyy
  • 2016-05-24 16:37:16
  • 2552

从网上前辈们手中收集过来的浏览器出现的BUG汇总

1.div的垂直居中问题  vertical-align:middle;  将行距增加到和整个DIV一样高 line-height:200px;  然后插入文字,就垂直居中了。缺点是要控制...
  • qishuai1986
  • qishuai1986
  • 2011-11-22 10:08:55
  • 2035

最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)(转载)

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格...
  • lovewqww
  • lovewqww
  • 2008-07-08 11:32:00
  • 1514
收藏助手
不良信息举报
您举报文章:消除inline-block产生的间隙
举报原因:
原因补充:

(最多只允许输入30个字)