在div中设置一张图片，并在css中将div宽度设置为520px，然后图片宽度=520px，按照布局来说应该是盒子高度会被内容撑起，但是结果却是在div下面有道白色空白区域，如果设置了div高度=图片高度就没问题，这是为什么呢？

下面上代码：
<style>

    *{         padding:0;         margin:0;     }     div{         /*box-sizing:border-box;*/         /*height:270px;*/         width:520px;         position:relative;         margin:80px auto;         border:1px solid gold;     }     img{         width:520px;              }     span{         /*height:80px;*/         /*box-sizing:border-box;*/         width: 40px;         display:block;         line-height: 80px;         text-align:center;         /*padding-left: 5px;*/         font-size:50px;         font-weight:bolder;         color:rgb(255,255,255);         background-color:rgba(0,0,0,0.4);     }     span:nth-of-type(1){         position:absolute;         top:50%;         /*left:0;*/         margin-top:-40px;     }     span:last-of-type{         position:absolute;         top:50%;         right:0;         margin-top:-40px;     }     ol{         list-style-type:none;         height:30px;         width:150px;         /*border:1px solid red;*/         position:absolute;         bottom:10px;         right:10px;     }     ol li{         line-height:30px;         width:30px;         float:left;         border:1px solid gold;         text-align:center;         background-color: rgba(255,255,255,0.7);         box-sizing:border-box;     }   <div>     <img src="img/ad.jpg" alt="ad页面">     <span>&lt;</span>     <span>&gt;</span>     <ol>         <li>1</li>         <li>2</li>         <li>3</li>         <li>4</li>         <li>5</li>     </ol> </div>