去除inline-block元素之间的间隙的若干种方法和基线对齐

一、先简单聊聊inline-block

在html的元素中,主要有块级元素(block-level element)、行内元素/内联元素(inline-level element)和行内块元素。

1、块级元素能够支持宽度和高度,并且默认占据一行,从而换行显示。

注意:块级元素和display:block;不是一个概念,块级元素并非都为display:block;例如表格是块级元素,但是他的display为table,


2、行内元素不同于块级元素,他不支持宽度和高度,并且只占据内容所占据的位置,从而不会换行显示。


3、正所谓“鱼,我所欲也;熊掌,亦我所欲也。二者不可得兼,舍鱼而取熊掌者也。”这里的鱼就好比是否换行显示,熊掌就好比宽度和高度。对于块级元素来说,虽然能够支持宽度和高度,但是他却不得不换行显示,于是只能舍鱼而取熊掌了哭。同理,对于行内元素来说,虽然我不能够支持宽度和高度,但是我不必换行显示呀得意。好了,既然块级元素和行内元素各有“利弊”,如果想让一个元素既支持高度和宽度(也就是块级元素的属性),又不让他换行显示(行内元素的属性),那该如何抓狂?嘿嘿,这时候就该inline-block登场啦!

二、如何去除inline-block元素之间的间隙与基线对齐

2.1 inline-block元素间隙产生的原因和解决方法

在上面已经谈到行内块元素同时具备块级元素和行内元素的属性,例如给div设置display:inline-block;之后,效果如下:




上图中的三个div元素,不仅有宽度和高度,而且并排显示了,不过大家有没有发现他们中间存在着一定的间隙,请看下图黄色圈住的部分,


这部分的空白间隙是怎么来的呢疑问,原因是对于行内元素来说,连续的换行或空格都会被浏览器解析为一个空格。而行内块元素既然具有行内元素的属性,因此就形成了上图中的间隙(下图中的浅灰色部分就是产生的间隙)


好了,我们现在已经知道了行内块元素之间空白间隙产生的原因,那么我们想要去除这些间隙就很容易了(对症下药)得意。方法有以下几种:

1、注释法

浏览器不会解析注释,所以在div(元素)之间添加注释能够去除他们之间的间隙。


2、标签法

上一个div(元素)闭合标签的>写在下一个div(元素)开始标签的<之前。


3、使用font-size:0;

给body设置font-size:0;div设置font-size:16px;这种方法不推荐使用,因为给body设置了font-size:0;之后,你都需要给那些有字体的部分设置字体大小(例如font-size:16px;)。



4、使用负外边距



5、使用空的行内标签


2.2 基线对齐

在说基线对齐之前,不知道大家以前高中时期有没有用英语本抄写英语单词。回想起我读高中的时候,我的英语书法那可以说是抽象派偷笑,那笔画连得有时候我自己都看不懂尴尬,在几次被老师说了以后,我终于下定决心去练一练我的英语书法,专门买了一本英语书法去临摹,然后每天都花半小时左右去练习,就这样日积月累,我的英语书法也慢慢的变好了害羞


扯了这么多,那么基线到底是什么呢,请看下图:


基线就是字母X的下边缘,也就是四格线从上往下数的第三根线。我们现在已经了解了inline-block和基线,那我们就来看看他们有神马关系~~

不知道大家有没有碰到这样的问题,对于inline-block元素,当他里面没有内容时,是这样的:


当给第一个元素添加内容的时候,是这样的:



what the f**k!第一个元素居然掉下来了惊恐,其实这就是基线对齐(vertical-align默认对齐方式,对块级元素没有作用)搞的鬼。对于inline-block元素来说,如果他里面没有行内元素的话,他的基线就是margin-bottom的下边缘,而如果里面有行内元素的话,基线就是行内元素的最后一行。所以第一个元素的基线变成了字母X的下边缘,而另外两个元素的基线是margin-bottom的下边缘(此时margin-bottom为0),于是乎,第一个元素就掉下来喽大笑。如果还没弄明白的话,我们可以多看几个例子,

第一个元素有3行


第二个元素margin-bottom:20px;




三、结语

本文是个人的一点学习心得,欢迎大家和我交流,对于存在错误的地方也欢迎大家纠正,感谢阅读吐舌头









展开阅读全文

没有更多推荐了,返回首页