显示我的网页时出现 CSS3 边框问题答案

【问题标题】：CSS3 Border issue when displaying my web page显示我的网页时出现 CSS3 边框问题
【发布时间】：2022-07-26 23:00:41
【问题描述】：

我在显示网页时遇到问题我在代码中使用 CSS 边框和边距，但浏览器中的输出非常尴尬这是我的代码，这是输出：

div {
    width: 300px;
    background-color: #DDD ; 
    padding: 10px;
    border: 10px solid red; 
    margin: 10px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>
        <h1>Product title</h1>
        <p>This is a paragraph</p>
    </div>
</body>
</html>

The output of my code in the browser

【问题讨论】：

您在寻找什么？你的期望是什么？建议您查看第二个盒子的盒子模型，以了解它的来源。

标签： html css

【解决方案1】：

看起来您在第一个元素之后还有第二个 div 元素。

也可能是Tag soup，您可以尝试验证您的 HTML 并查看是否有任何错误或警告。

div {
    width: 300px;
    background-color: #DDD ; 
    padding: 10px;
    border: 10px solid red; 
    margin: 10px;
}

<div>
   <h1>Product title</h1>
   <p>This is a paragraph</p>
</div><div>

【讨论】：

不，我有一个 div
当你右击第二个矩形和Inspect元素时，你在DOM Inspector中看到了什么？