为什么我的内容周围有两条边框？

Question

为什么我的内容周围有两个红色边框？

这是结果旁边的代码的图片：

这是我用来制作内容的代码。

  * {
  padding: 0px;
  margin: 0px;
}

body {
  background-color: #0000ff;
  margin: 25px auto;
  width: 1140px;
  height: 400px;
  float: left;
  color: white;
}

#first {
  border: 1px solid #ff0000;
  width: 300px;
  color: red;
  background-color: black;
  padding: 10px;
  margin: 5px;
}

#notes-example {
  border: 1px #ff0000 solid;
  padding: 25px;

<div id="notes-example">
  <ol id="notes-example">
    <h2 id="first">Example of how the notes will be laid out</h2><br>
    <h3>Heading</h3>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis totam, blanditiis quibusdam suscipit in, omnis quo consequuntur porro sint reprehenderit necessitatibus ipsam? Beatae ea numquam, ducimus nostrum est id officiis.</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores optio eos sequi, laudantium culpa quaerat perspiciatis laborum sed eaque reiciendis quam alias in corporis, odio omnis temporibus hic aliquid aliquam!</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi placeat blanditiis, animi sequi. Vel, fuga architecto repellendus incidunt provident sapiente vitae. Perspiciatis id nisi maxime, nemo alias quo? Rem, accusamus!</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tenetur corrupti cupiditate delectus eos autem quae tempore inventore iusto aliquam hic optio magnam quibusdam labore obcaecati eius, fugit vel esse.</li><br>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus eaque, placeat, labore illum commodi atque dignissimos beatae doloremque corrupti dolor accusantium. Inventore temporibus unde saepe aperiam, amet consequatur velit?</li><br>
  </ol>
</div>

感谢您的帮助。

这是根据建议从#notes-example https://imgur.com/qfzweDW

中删除边框属性的更新视频片段

Answer 1

检查这个片段。已从 div

中删除边框和 ID

    * {
   padding:0px;
   margin:0px;
  }
  body {
   background-color:#0000ff;
   margin: 25px auto;
   width:1140px;
   height:400px;
   float:left;
   color:white;
  }
  #first {
   border:1px solid #ff0000;
   width:300px;
   color:red;
   background-color:black;
   padding:10px;
   margin:5px;
  }
  #notes-example {
   padding:25px;
border:1px solid #ff0000;}

<div>
<ol id="notes-example">
<h2 id="first">Example of how the notes will be laid out</h2><br>
<h3>Heading</h3> 
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis totam, blanditiis quibusdam suscipit in, omnis quo consequuntur porro sint reprehenderit necessitatibus ipsam? Beatae ea numquam, ducimus nostrum est id officiis.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores optio eos sequi, laudantium culpa quaerat perspiciatis laborum sed eaque reiciendis quam alias in corporis, odio omnis temporibus hic aliquid aliquam!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi placeat blanditiis, animi sequi. Vel, fuga architecto repellendus incidunt provident sapiente vitae. Perspiciatis id nisi maxime, nemo alias quo? Rem, accusamus!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tenetur corrupti cupiditate delectus eos autem quae tempore inventore iusto aliquam hic optio magnam quibusdam labore obcaecati eius, fugit vel esse.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus eaque, placeat, labore illum commodi atque dignissimos beatae doloremque corrupti dolor accusantium. Inventore temporibus unde saepe aperiam, amet consequatur velit?</li><br>
</ol>
</div>

Answer 2

您两次调用 notes-example，导致应用了两次边框。

要么只调用一次，要么您可以重命名其中一个 div 以仅应用没有边框的样式。

对于您来说，我认为这就是您在 HTML 代码中所追求的。否则只需添加一个新的 div ID 名称（即 notes-example2）并将其放在 CSS 中，并在其中填充而不是边框。

<div>
<ol id="notes-example">
<h2 id="first">Example of how the notes will be laid out</h2><br>
<h3>Heading</h3> 
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis totam, blanditiis quibusdam suscipit in, omnis quo consequuntur porro sint reprehenderit necessitatibus ipsam? Beatae ea numquam, ducimus nostrum est id officiis.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores optio eos sequi, laudantium culpa quaerat perspiciatis laborum sed eaque reiciendis quam alias in corporis, odio omnis temporibus hic aliquid aliquam!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi placeat blanditiis, animi sequi. Vel, fuga architecto repellendus incidunt provident sapiente vitae. Perspiciatis id nisi maxime, nemo alias quo? Rem, accusamus!</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam tenetur corrupti cupiditate delectus eos autem quae tempore inventore iusto aliquam hic optio magnam quibusdam labore obcaecati eius, fugit vel esse.</li><br>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam delectus eaque, placeat, labore illum commodi atque dignissimos beatae doloremque corrupti dolor accusantium. Inventore temporibus unde saepe aperiam, amet consequatur velit?</li><br>
</ol>
</div>

Answer 3

问题已解决。我需要将其中一个 ID 重命名为其他名称，因为其中两个名为 id="notes-example"

感谢您的帮助。

Answer 4

您已为 2 个元素指定了 ID "notes-example"。 “notes-example

为什么我的内容周围有两条边框？

Why do I have two borders around my content?

html

css

border