关于行内块元素之间的间隙问题
一次偶然的机会,参加了一个面试,面试了一些基础问题,但是问到了原理,其中一个就是关于元素显示模式问题,自然而然涉及到了一个很普通的问题,但是这个问题的原理,偏偏很多人不在意,当然,这个“很多人”也包括我,这个问题就是——在给元素转换成行内块元素后,有什么弊端,弊端该怎么解决,原理是什么。当时这个问题,除了弊端回答上来了之外,另外两个延申的问题一个都没有回答上来,今天正好有时间,做一下记录。
1.转换成行内块元素后,有什么弊端
这个问题很简单,但凡是了解过元素显示模式,知道如何转换显示模式的人,都能回答上来,弊端就是——转换成行内块元素之后,两个行内块元素之间会有间隙,或者叫留白。
2.这个弊端怎么解决
这个问题一样简单,学过浮动就可以解决,添加浮动,添加完浮动之后,可以去除行内块元素之间的空隙。今天闲着没事,进行百度之后,发现了其他的解决方法:
1)最简单的方法,让两个行内块元素代码写在一行内,至于是为什么,下面原理会说
<div></div><div></div><div></div>
2)就是浮动了,添加浮动一样可以解决问题
float: left;
3)使用外边距,这个最容易理解,既然行内块元素之间有缝隙,那就是用外边距,使用负值,拉近距离
margin-left: -5px;
以上方法都很简单,但是都很实用,至于还有没有其他方法,这个还需要再探讨一下
3.原理是什么?或者说为什么会出现这种情况
原因很简单,我们再书写代码时,很重要的一点就是要换行,要进行标签对其,这样有利于后期代码修改、维护,而且看起来也舒服,但是对于浏览器来说,它识别不了换行,同样识别不了空格,它会将换行识别为一个空 格,对多个空格也会识别为一个,这样就会使两个块元素之间的换行识别为空格,从而产生空隙,而以上的 1)和 2)方法就很好理解,而使用外边距纯粹是,既然有间隙,那我就给你强制拉回去
多读书,多看报,少吃零食多吃药。
学无止境,很多问题都隐藏在一些简单的问题内。