使用display: inline-block时可能会出现空白间隙和垂直对齐等问题,但通过上述相应的解决方法,可以有效地克服这些问题,实现更精确、更美观的页面布局效果。
元素被当成行内元素排版的时候,元素之间的空白符都会被浏览器处理,根据CSS中 white-space 属性的处理方式(默认是normal,合并多余空白),原来HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以 inline-block 的元素之间就出现了空隙。 3. 问题的解决办法 1. 将子元素标签的结束符...
解决办法 1.将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行 左 右 2. 父元素中设置 font-size: 0,在子元素上重置正确的 font-size .container{ width:800px; height:200px; font-size: 0; } 3. 为子元素设置 float:left .left{ float: left; font-size: 14...