行内块元素因换行带来的间隔问题
先看一个案例所展示的行内块元素因换行带来的间隔问题,俺直接上截图
从第一张截图可以看到大盒子的宽度为640px,每个小a盒子的宽度为80px,按道理来说8个小a盒子的宽度加起来刚好等于640px,但从第二张截图的效果可以看出最后一个小a盒子由于父元素的宽度不够而掉了下来,这正是俺接下来要说的行内块元素因换行带来的间隔问题
再来一张截图可以更加清楚地看见行内块元素之间因换行而带来的间隔
在上方第一张截图中俺将大盒子的背景颜色注释掉,让每个小a盒子的背景颜色显示出来,从上方第二张图中我们可以看出每个小a盒子之间都进行了换行,第三张图就是浏览器渲染效果,下面再看一下对比的效果图
可以从上方两张图看出当我们将8个小a盒子在编辑器中不换行的书写后,第8个小a盒子成功地上去了排在了大盒子的最后面
从上方所有图片可以看出,行内块元素之间一行并排放置时编译器中的换行操作会在浏览器渲染时带来行内块元素之间的间隔,这是我们不想得到的结果,接下来俺就提供几种解决这种现象的方法
解决行内块元素因换行带来的间隔问题的方法
1.所有行内块元素在编译器中写到同一行(狗都不用)
这种方法就是上方所演示的一种方法,但这种方法应该不会有人去使用,因为俺们作为一个程序员代码的美观性或多或少都会有点,美观性再差的程序员也知道这种情况下换行书写比写在一行上看的舒服多了,所以这种方法只是写出来看看,不会真的有人这样写代码吧?
2.在浏览器调试工具中给父元素盒子加宽度(对于页面总体布局而言不推荐使用)
这种方法俺们在浏览器调试工具中去给父元素盒子加宽度,直到最后一个盒子上去,再将调试好的宽度复制到编译器中去。这种方法也不推荐使用.毕竟这是一种笨方法,如果需求变更需要加盒子或者减盒子,那么俺们又要去调整父元素盒子的宽度.,不灵活。
3.给每个小a盒子添加浮动(推荐使用)
俺们可以从图中看出再给每个小a盒子添加左浮动后,8个小a盒子都上去紧凑地排列在一排,很好地解决了间隔问题
(元素浮动后就是半脱标的状态,此时不需要转块级或行内块元素,可以直接给予宽高,可以很好地解决行内块间隔的问题)
4.给父元素盒子添加flex布局(推荐使用,真的香)
flex是弹性布局,再给父元素添加flex属性后,父元素就是一个容器,子元素都是其中的项目,父盒子设置flex布局后，子元素将不区分行内元素和块元素并在同一行排列，此时所有子元素均可以设置宽高
