html - 从代码中删除段落后，页脚会更改其 UI

我在页脚的 HTML 中有以下代码。

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" type="text/css" href="style_testfooter.css">
</head>
<body>
<div class="footer">
  <p>hello</p>
</div>


<div class="footerdark">
    <p> hello</p>
</div>

</body>
</html>

同样的CSS代码如下:

.footer {
   position: relative;
   left: 0;
   bottom: 110px;
   width: 100%;
   background-color: #303740;
   color: white;
   text-align: center;
   padding: 160px 0px;
}

.footerdark {
   position: relative;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #272d35;
   color: white;
   text-align: center;
   padding: 30px 0px;
}

当我尝试从 html 代码中删除 para 标签时，页脚的 UI 发生了变化。原因/错误是什么？

Before removal of p tags

After removal of p tags

最佳答案

您的 .footer 类设置了底值。目前，在 p 标签就位的情况下，它正在改变较低的页脚高度以足以覆盖该空白区域。我建议删除 bottom: 110px。

注意 p 标签是 block 级元素，因此它们横跨其父元素的整个宽度并具有设置的高度，这会影响其父元素的高度。

关于html - 从代码中删除段落后，页脚会更改其 UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50309530/