I have tried using "\*{margin: 0;padding: 0;}". I have also tried setting negative margin around the div element. Though this solution takes care of the top whitespace,the bottom whitespace lacks the padding of 15px.Any help in this regard would be appreciated. Here is the image of the card.[card](https://i.stack.imgur.com/HzNY4.png)

Here are the HTML and CSS

```css
/* add your CSS here */

.fact{
 font-style: italic;
}
.items{
 font-weight: bold;
}
ul { 

 list-style-type: none;
 padding: 0px;
}
body{

 border: 1px solid #D9D9D9;
 box-shadow: 7px 7px 1px #e9e9e9;
 box-sizing: border-box;
 width: 330px;
 }
.info{ 
 margin: 15px 15px 30px;
 padding: 0px 15px 0px;
 border:1px solid #D9D9D9;
}
h3{ 
 padding: 25px 15px 0px;
 font-size: 1.5em;
}
.image{ 
 padding: 0px 15px;
 width: 300px;
}
.all{

 background-color: #c9b3b5;
}
```

```html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Animal Trading Cards</title>
 <link href="styles.css" rel="stylesheet">
</head>
<body>
 <div class="all">
  <!-- your favorite animal's name goes here -->
  <h3>Tyrannosaurus</h3>
  <!-- your favorite animal's image goes here -->
  <img src="https://img.purch.com/rc/300x200/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA1OS81NTgvb3JpZ2luYWwvbmV3LWRpbm9zYXVyLTEzMTEyMi5qcGc=" alt="Tyrannosaurus" class="image">
  <div class="info">
   <!-- your favorite animal's interesting fact goes here -->
   <p class="fact">Tyrannosaurus' fossil remains are relatively rare, as of 2012 only 44 specimens had been found, including three complete skulls.</p>
   <ul>
    <!-- your favorite animal's list items go here -->
    <li><span class="items">Scientific name</span>: Tyrannosaurus</li>
    <li><span class="items">Speed</span>: 40 Km/h</li>
    <li><span class="items">Family</span>: Tyrannosauridae</li>
    <li><span class="items">Rank</span>: Genus</li>
   </ul>
   <!-- your favorite animal's description goes here -->
   <p>Like other tyrannosaurids, Tyrannosaurus was a bipedal carnivore with a massive skull balanced by a long, heavy tail. Relative to its large and powerful hind limbs, Tyrannosaurus fore limbs were short but unusually powerful for their size and had two clawed digits. </p>
  </div>
 </div>
</body>
</html>
```

```css
/* add your CSS here */

.fact{
 font-style: italic;
}
.items{
 font-weight: bold;
}
ul { 

 list-style-type: none;
 padding: 0px;
}
body{

 border: 1px solid #D9D9D9;
 box-shadow: 7px 7px 1px #e9e9e9;
 box-sizing: border-box;
 width: 330px;
 }
.info{ 
 margin: 15px 15px 30px;
 padding: 0px 15px 0px;
 border:1px solid #D9D9D9;
}
h3{ 
 padding: 25px 15px 0px;
 font-size: 1.5em;
}
.image{ 
 padding: 0px 15px;
 width: 300px;
}
.all{

 background-color: #c9b3b5;
}
```

```html
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Animal Trading Cards</title>
 <link href="styles.css" rel="stylesheet">
</head>
<body>
 <div class="all">
  <!-- your favorite animal's name goes here -->
  <h3>Tyrannosaurus</h3>
  <!-- your favorite animal's image goes here -->
  <img src="https://img.purch.com/rc/300x200/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA1OS81NTgvb3JpZ2luYWwvbmV3LWRpbm9zYXVyLTEzMTEyMi5qcGc=" alt="Tyrannosaurus" class="image">
  <div class="info">
   <!-- your favorite animal's interesting fact goes here -->
   <p class="fact">Tyrannosaurus' fossil remains are relatively rare, as of 2012 only 44 specimens had been found, including three complete skulls.</p>
   <ul>
    <!-- your favorite animal's list items go here -->
    <li><span class="items">Scientific name</span>: Tyrannosaurus</li>
    <li><span class="items">Speed</span>: 40 Km/h</li>
    <li><span class="items">Family</span>: Tyrannosauridae</li>
    <li><span class="items">Rank</span>: Genus</li>
   </ul>
   <!-- your favorite animal's description goes here -->
   <p>Like other tyrannosaurids, Tyrannosaurus was a bipedal carnivore with a massive skull balanced by a long, heavy tail. Relative to its large and powerful hind limbs, Tyrannosaurus fore limbs were short but unusually powerful for their size and had two clawed digits. </p>
  </div>
 </div>
</body>
</html>
```