代码编辑器里即使没有使用转义字符
,HTML行内块状元素设置了CSS属性值display:inline-block
代码被回车换行,在前端浏览器渲染后会产生空白占位符从而破坏网页布局!
或许网页里一小点间隙不会影响排版的美观度,如果在排版尺寸要求极高的打印模板里产生各种空白占位符,其打印出来的效果会让人崩溃(┬_┬)。
为了HTML代码的从属性及美观度,通常都会按回车键强制将代码换行。解决HTML行内块级元素产生的空白占位符的常用技巧有4种:
设置块级元素父容器的字体大小
如下HTML实例代码所示,将div元素的CSS样式设置为font-size:0
<div style="height:5mm;font-size:0"> <span id="year" style="display: inline-block;width:10mm;line-height:5mm;font-size:10.5pt">2018</span> <span id="month" style="display: inline-block;width:8mm;line-height:5mm;font-size:10.5pt">10</span> <span id="day" style="display: inline-block;width:8mm;line-height:5mm;font-size:10.5pt">18</span> </div>
浮动HTML块级元素
如下HTML实例代码所示,将设置了inline-block
CSS属性值的<span></span>
元素添加float:left
CSS属性值(注意最后要清除浮动)。
<div style="height:5mm"> <span id="year" style="float:left;display: inline-block;width:10mm;line-height:5mm">2018</span> <span id="month" style="float:left;display: inline-block;width:8mm;line-height:5mm">10</span> <span id="day" style="float:left;display: inline-block;width:8mm;line-height:5mm">18</span> </div>
注释块级元素周边的空白区域
如下HTML实例代码所示,在</span>
之后<span>
之前添加HTML注释符<!-- -->
<div style="height:5mm"> <span id="year" style="display: inline-block;width:10mm;line-height:5mm">2018</span><!-- --><span id="month" style="display: inline-block;width:8mm;line-height:5mm">10</span><!-- --><span id="day" style="display: inline-block;width:8mm;line-height:5mm">18</span> </div>
换行闭合块级元素的HTML标签
如下HTML实例代码所示,回车换行闭合<span>
标签
<div style="height:5mm"> <span id="year" style="display: inline-block;width:10mm;line-height:5mm">2018</span ><span id="month" style="display: inline-block;width:8mm;line-height:5mm">10</span ><span id="day" style="display: inline-block;width:8mm;line-height:5mm">18</span> </div>
经验总结:<span></span>
标签组之间如果不敲回车键,就不会产生空白字符占位的问题。为了后期代码维护时的可读性通常会将HTML代码按HTML标签组换行。
以上几种解决HTML元素方法建议采用第一种解决办法。第二种元素的float浮动会带来意想不到的后果,起码要clear一下浮动。
结合自己的代码习惯和实际项目需要采取最适合的解决方案!