CSS全局选择器设置背景色异常：元素旁区域无背景色求助

使用通配符选择器*为所有元素设置黑色背景色后，页面及元素虽已应用样式，但元素旁的横向区域仍未显示背景色，单独为元素和body设置背景色也无法解决。

现有代码 #

CSS代码

*{
    background-color: black;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="index.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <title>Doc</title>
</head>
<body>
    <button>hi</button>
</body>
</html>

问题根源是浏览器默认样式和Bootstrap全局样式的影响：

• 浏览器默认会给html元素保留边距，导致页面边缘出现空白区域；
• 仅用*设置背景无法完全覆盖html默认边距带来的空白，且body默认高度仅由内容撑开，内容不足时下方也会留白。

直接修改CSS即可解决：

/* 清除所有元素的默认边距和内边距 */
* {
    margin: 0;
    padding: 0;
}

/* 确保html和body占满整个视口，设置黑色背景 */
html, body {
    width: 100%;
    min-height: 100vh;
    background-color: black;
}

/* 让所有子元素继承黑色背景（可选，若需要元素背景也为黑色） */
* {
    background-color: inherit;
}

如果不需要所有子元素都继承背景，也可以只给html和body设置背景，这样页面整体就是黑色，子元素可以单独设置样式。

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