HTML Footer背景未完全铺满，需使两段内容置于蓝色背景区域内

嘿，这问题我熟！你的Footer背景没铺满、段落好像跑出蓝色区域，主要是两个小默认样式在搞鬼，我给你一步步搞定：

问题根源 #

1. <p>标签默认自带上下margin，会导致段落超出Footer的背景范围，看起来像是背景没包住文字。
2. 浏览器给body标签默认加了margin，这会让Footer左右两边留空白，背景没法铺满整个屏幕宽度。

修复方案 #

直接修改你的CSS，加上这些重置和样式：

/* 先重置body的默认外边距，让Footer能撑满屏幕宽度 */
body {
  margin: 0;
}

.footer{
  padding: 10px;
  font-size: 14px;
  background-color: #0071ba;
}

/* 清除Footer内p标签的默认上下外边距，让文字完全在背景里 */
.footer p {
  margin: 0;
}

/* （可选）如果想让两个段落左右分开排列，加上这段 */
.footer-txt-left {
  float: left;
}

.footer-txt-right {
  float: right;
}

/* 清除浮动，避免Footer因为子元素浮动而高度塌陷 */
.footer::after {
  content: "";
  display: table;
  clear: both;
}

效果说明 #

• 重置body的margin后，Footer的蓝色背景会从屏幕最左端延伸到最右端，彻底解决背景未铺满的问题。
• 清除p标签的margin后，两个段落的文字会完全被Footer的蓝色背景包裹，不会出现“文字在背景外”的情况。
• 可选的浮动样式能让版权文字居左、链接居右，同时用伪元素清除浮动保证Footer的正常高度，不会出现内容溢出或高度塌陷。

内容的提问来源于stack exchange，提问作者AM I IDIOT