html - 为什么背景颜色根据边框填充不同的区域？

这很可能是一个之前已经回答的愚蠢问题，但我还没有找到答案......

我有一个简约的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Demo</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header><h1>Title</h1></header>
<main><p>Content</p></main>
</body>
</html>

使用以下CSS：

body {
    margin: 0px;
}

header {
    border: 1px solid black;
    background-color: red;
}

main {
    border: 1px solid black;
    background-color: yellow;
}

呈现给：

如果我遗漏边框，只有部分元素用背景颜色填充：

为什么填充区域取决于是否有边界？

为什么背景颜色根据边框填充不同的区域？

0 个答案: