html一个盒子里文字会溢出,html盒子问题，内容撑起盒子高度，却导致了盒子最下面空白...

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

下面上代码：

*{

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;

}

<

>

1. 1
2. 2
3. 3
4. 4
5. 5