html 如何div中占位,如何去除HTML行内块级元素换行带来的空白占位符

代码编辑器里即使没有使用转义字符 ，HTML行内块状元素设置了CSS属性值display:inline-block代码被回车换行，在前端浏览器渲染后会产生空白占位符从而破坏网页布局！

或许网页里一小点间隙不会影响排版的美观度，如果在排版尺寸要求极高的打印模板里产生各种空白占位符，其打印出来的效果会让人崩溃(┬＿┬)。

HTML网页渲染后产生的空白占位符

为了HTML代码的从属性及美观度，通常都会按回车键强制将代码换行。解决HTML行内块级元素产生的空白占位符的常用技巧有4种：

设置块级元素父容器的字体大小

如下HTML实例代码所示，将div元素的CSS样式设置为font-size:0

2018

10

18

浮动HTML块级元素

如下HTML实例代码所示，将设置了inline-block CSS属性值的元素添加float:left CSS属性值(注意最后要清除浮动)。

2018

10

18

注释块级元素周边的空白区域

如下HTML实例代码所示，在之后之前添加HTML注释符

20181018

换行闭合块级元素的HTML标签

如下HTML实例代码所示，回车换行闭合标签

2018

>10

>18

经验总结：

标签组之间如果不敲回车键，就不会产生空白字符占位的问题。为了后期代码维护时的可读性通常会将HTML代码按HTML标签组换行。

以上几种解决HTML元素方法建议采用第一种解决办法。第二种元素的float浮动会带来意想不到的后果，起码要clear一下浮动。

结合自己的代码习惯和实际项目需要采取最适合的解决方案！