html中单独用绝对定位时，设置bottom的问题，求指导

html中没有relative定位，只有一个absolute定位，设置bottom为0px，多出了15px的空白条，理解不了。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>唯品会banner2</title>
  <style>
    * {
        margin:0;
        padding:0;
    }
    li {
        list-style:none;
    }
    #box {
        
        height:420px;
        background:url("http://a.vpimg3.com/upload/flow/2017/05/15/29/14948175903179.jpg") center -15px ;
        margin-top:160px;
        border:1px solid red;
    }

    .title {
        position:absolute;
        width:1000px;
        height:40px;
        background:red;
        bottom:0px;

    }

  </style>
 </head>
 <body>
    <div id="box">
    </div>
        <div class="title">
            <ul>
                <li>端午节88折活动</li>
                <li>居家大促</li>
                <li>分享美食</li>
                <li>夏季潮流</li>
                <li>赫基集团</li>
            </ul>
                
        </div>
 </body>
</html>

问题页面：