为什么我的内容周围有两个边界？

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>

谢谢您的帮助。

以下是更新后的视频，摘录为按照建议的suggested从＃notes-example中删除边框属性

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，因为其中两个被命名为id =“ notes-example”

谢谢您的帮助。

Answer 4

您在2个元素上指定了id“ notes-example”。 “ notes-example