为什么这添加了内边距会变成这样子

未加内边距的时候

未加内边距时样式源码

.first{
   overflow: hidden;
   zoom: 1;
}
.second{
   overflow: hidden;
   zoom: 1;
}
.first div{
   float: left;
}
.img{
   width: 25%;
}
.bottom img{
   display: block;
   height: 365px;
}
.content{
   background-color: #07cbc9;
   width: 25%;
   height:365px;
}
.second div{
   float: left;
}

标签源码

<div class="about">
   <div class="top">
       <div></div>
       <div></div>
       <div></div>
   </div>
   <div class="bottom">
       <div class="first">
           <div class="img"><img src="./img/b1.jpg" alt=""></div>
           <div class="content">
               <div class="font2_1">Library</div>
               <div class="font2_2">Lorem Ipsum is simply dummy text of the <br>
               printing and typesetting industry</div>
               <div class="font2_3">Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s, when an unknown printer took<br>a galley of type and scrambled it to make a type specimen book.</div>
               <buttom>EXPLORE</buttom>
           </div>
           <div class="img"><img src="./img/b2.jpg" alt=""></div>
           <div class="content"></div>
       </div>
       <div class="second">
           <div class="content"></div>
           <div class="img"><img src="./img/b3.jpg" alt=""></div>
           <div class="content"></div>
           <div class="img"><img src="./img/b4.jpg" alt=""></div>
       </div>
   </div>
</div>

加了内边距之后

样式代码

.first{
   overflow: hidden;
   zoom: 1;
}
.second{
   overflow: hidden;
   zoom: 1;
}
.first div{
   float: left;
}
.img{
   width: 25%;
}
.bottom img{
   display: block;
   height: 365px;
}
.content{
   background-color: #07cbc9;
   width: 25%;
   height:365px;
   padding: 15px;
}
.second div{
   float: left;
}

标签部分未作修改