我正在练习HTML，我在.content2部分有上述问题。 我可以解决它，但不知道它为什么会发生。如果我把ie padding：1px放到我的.content2，那么空间就会消失。你能解释一下我怎么能避免这类问题。 谢谢。
body {
margin: 0;
padding: 0;
background-color: green;
}
/*HEADER*/
.containera
{
width: 25%;
background-color: white;
float: left;
height: 50px;
}
.picheader {
height: 50px;
margin: auto;
}
.h4right {
float:right;
}
.containerb
{
width: 45%;
height: 50px;
background-color: white;
float: right;
}
/*menu*/
ul {
list-style-type: none;
margin: 0;
padding: 10px;
height: 50px;
overflow: hidden;
background-color: white;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 15px 35px;
text-decoration: none;
}
li a:hover {
background-color: orange;
}
.header
{
background: white;
padding: 50px;
height: 25px;
border-bottom: 5px solid orange;
}
/*Content*/
p {
text-align: center;
}
.content
{
background-color: white;
height: 550px;
}
.col1 {
width: 25%;
border-left: 1px solid orange;
border-right: 1px solid orange;
border-bottom: 1px solid orange;
float: left;
height: 550px;
}
.h2word {
text-align: center;
width: 100%;
text-decoration: underline;
}
.col1pic {
display: block;
margin: auto;
width: 150px;
height: 200px;
}
.col1header {
text-align: center;
}
iframe {
margin-right: auto;
margin-left: auto;
display:block;
}
.col2 {
width: 25%;
border-right: 1px solid orange;
border-bottom: 1px solid orange;
float: right;
height: 550px;
}
.col2pic {
display: block;
margin: auto;
width: 180px;
height: 200px;
}
.col3 {
width: 50%;
border-right: 1px solid orange;
border-bottom: 1px solid orange;
margin: auto;
height: 550px;
}
.col3pic {
display: block;
margin: auto;
width: 150px;
height: 200px;
}
.col3header {
text-align: center;
}
/*Content2*/
.content2 {
height: 250px;
background-color: pink;
padding: 1px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/four.css">
<title></title>
</head>
<body>
<div class="header">
<div class="containera">
<img >
</div>
<div class="containerb">
<ul>
<li><a href="#MLS">a</a></li>
<li><a href="#MLS">b</a></li>
<li><a href="#MLS">c</a></li>
<li><a href="#MLS">d us</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="col1">
<img >
<h3 class="col1header">Zlatan's debut</h3>
<p>r</p>
<br>
<div class="col2">
<img >
<h3 class="i</h3>
<p>k</p>
<br>
</div>
<div class="col3">
<img></img>
<h3 class="col3header">x</h3>
<p>g</p>
<br>
</div>
</div>
<div class="content2">
<h2>
Major professional sports leagues in the United States and Canada</h2>
</div>
</body>
</html>
内容2;空间将消失。