html - 边框和卡片元素之间的间距
问题描述
这是我正在使用 Udacity（交易卡）做的一个实验室。我在提交项目时遇到错误。显示的问题是带有样式的交易卡页面在边框和卡片元素之间有间距外部边框周围必须有一些填充：预期 0 高于 0
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<title>Building the Prototype</title>
</head>
<body>
<div id="container" class="pg">
<div id="card"class="animal-info">
<div class="animal-name">
<h1>FISH OF NEEDLES</h1>
</div>
<!-- photo credit: wikipedia.org, image taken by Ritik -->
<img id = "imgId"
src="https://kids.nationalgeographic.com/content/dam/kidsea/kids-core-objects/animals/pufferfish-closeup-cut.ngsversion.1556636497139.adapt.1900.1.jpg" width="300px" alt="Pufferfish">
<div id="interesting-fact">
<p id="interesting-fact">Pufferfish can inflate into a ball shape to evade predators. Also known as blowfish, these clumsy swimmers fill their elastic stomachs with huge amounts of water (and sometimes air) and blow themselves up to several times their normal size.</p>
<ul id="facts">
<li>
<span>Scientific Name</span>: Pufferfish
</li>
<li>
<span>Average Length</span>: Up to 3 feet
</li>
<li>
<span>Diet </span>: Carnivore
</li>
<li>
<span>Tactic </span>: Scientists believe that puffer fish developed this tactic as a method of the self-defense because they are poor swimmers that cannot escape from the danger quickly.
</li>
<li>
<span>Toxic </span>: One puffer fish contains enough toxin to kill 30 adult men.
</li>
<li>
<span>Average Lifespan</span>: 10 years
</li>
<li>
<span class="Habitat">Habitat</span>: puffer fish which live mostly in the warm waters of the Indian, Pacific and Atlantic Oceans
</li>
</ul>
<p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers.
They reach about 11 centimeters in length, and are named for the multicolored sea anemone in which they make their
homes.
</p>
</div>
</div>
</div>
</body>
</html>
css
.animal-info {border: thin solid gray;
padding:5px; font-style: italic; }
.Habitat {
font-weight: 700;
}
span {
font-weight: 700;
}
p {
padding: 20px 50px;
}
ul { list-style: none;
padding: 20px 50px;
}
img {
width: 300px;
padding: 5px;
}
#interesting-fact {
margin: 6px;
text-align:justify;
font-family: Calibri, Candara, "Segoe UI", Optima, Arial, sans-serif;
font-size: 13px;
padding: 0px 15px 0px 15px;
}
.pg {border: 1px solid gray;}
.animal-name{
padding: 5px;
}
h1 {pading: 5px;}
#imgId{
width: 300px;
}
#imgId{
padding: 5px;
}
有人可以帮助我吗