HTML标签间多余空格及Banner背景未铺满问题咨询

一、

标签间多余空白的原因 #

排除行高、边距/内边距问题后，最常见的原因是HTML代码中

标签之间的换行、空格等空白字符被浏览器解析为了空格。浏览器会将块级元素或行内元素之间的空白字符（包括换行、空格、制表符）合并成一个空格显示，视觉上就会产生额外的间距。

比如你代码里如果是这样的结构：

<p>Email</p>
<p>xxx@example.com</p>

两个<p>之间的换行就会被渲染成一个空格，导致看起来有多余空白。

二、banner类元素背景色无法铺满左侧的原因 #

最可能的原因是父容器设置了左内边距（padding-left）：banner作为子元素，块级元素的默认宽度是“父容器的内容宽度”（即父容器宽度减去padding值），所以banner的背景色只能覆盖到父容器的内容区域，左侧的padding区域属于父容器的范围，不会被banner的背景色填充，看起来就是铺不满左侧。

另外还有两种小概率情况：

• banner元素的display属性被设置为inline-block或inline，此时它的宽度由内容决定，不会自动占满父容器宽度，导致左侧留空；
• 父容器或banner元素使用了**浮动（float）**但未正确清除，或者设置了position: relative并添加了left偏移值，导致banner位置偏移，左侧出现空白区域。

内容的提问来源于stack exchange，提问作者DropKick