如何消除开发过程中两个水平排列的块级元素之间的空隙
第一步,给这两个块级元素加一层包装,也就是在它们外部套一层div
第二步,外层的这个父元素的font-size设置为0.
第三步,在这两个块级元素内,将font-size改回正常水平
原因分析:
如下的两个div在水平排列时是不会有间隙的
1 <div></div><div></div>
但是如果写成下面这样,就会出现间隙
1 <div></div> 2 <div></div>
实际上,这两个div在分成两行来写的时候,它们中间会被自动填入一个text节点,也就是会出现空格,表现出来就是间隙
第一种写法显然不适合开发过程。因此在第二种写法中,将两个div同一层级的字体大写设置为0,那个空格自然就没有了大小。间隙也就不存在了。