CSS div背景色未填充文本区域问题求助

学习CSS时遇到问题：为div添加背景色后，背景色未能完全填充容器，白色背景未覆盖到文本区域内部。

代码如下：

function popup() {
    const popup = document.createElement('div');
    popup.classList.add('popup');
    popup.innerHTML = `
    <div class="popup_inner">
    <h1>Change Logs</h1>
    <h3>1.0.0 -> 1.0.1</h3>
    <p>1. Added Change Logs<br/>2. Added First User Interface</p>
    <button class="close_button" onclick="document.querySelector('.popup').remove()">X</button>
    </div>
    <style>
        .popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.popup_inner {
background-color: #fff;
padding: 20px;
border-radius: 5px;
position: relative;
min-width: 300px;
min-height: 300px;
max-width: 500px;
max-height: 500px;
}
.close_button {
position: absolute;
top: 0;
right: 0;
background-color: red;
border: none;
border-radius: 0 5px 0 5px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
.close_button:hover {
background-color: #ff0000;
}
    </style>`;
    document.body.appendChild(popup);
}

解决方案 #

问题根源是浏览器给h1、h3等标题元素默认设置了margin，这些margin会溢出.popup_inner容器，导致白色背景无法覆盖到溢出的margin区域。可以通过以下两种方式修复：

方法1：给容器添加溢出控制 #

修改.popup_inner的CSS，添加overflow: auto;，既可以阻止margin溢出，还能在内容超出最大高度时显示滚动条：

.popup_inner {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  position: relative;
  min-width: 300px;
  min-height: 300px;
  max-width: 500px;
  max-height: 500px;
  overflow: auto; /* 添加这行 */
}

方法2：重置内部元素的margin #

统一设置.popup_inner内所有文本元素的margin，避免溢出：

.popup_inner h1,
.popup_inner h3,
.popup_inner p {
  margin: 0 0 1.5em 0; /* 底部保留间距，消除上下溢出的margin */
}

修改后，白色背景就能完全填充容器，覆盖所有文本区域了。

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