html - 为什么我的内容有两个边框？

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

标签： htmlcssborder

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>