css - CSS の不要な垂直スペース

Question

「wrap」div に複数行のコンテンツを入力すると、div の下部に垂直方向のスペースが作成されます。どうすればこれを防ぐことができますか?

スクリーンショット

JSFiddle

HTML

<div id="widgets">
  <div id="wrap">
   <h1 class="name" >Models</h1>
     <li><a href="">Rename a column</a></li>
     <li><a href="">git add all new or modified files</a></li>
     <li><a href="">Heroku assets:precompile plugin </a></li>
     <li><a href="">Heroku tail logs</a></li>
     <li><a href="">Rename a column</a></li>
     <li><a href="">Heroku load db:schema </a></li>
     <li><a href="">Heroku: connect to database </a></li>
     <li><a href="">Postgres: show tables</a></li>
     <li><a href="">git switch to a branch </a></li>
     <li><a href="">add records from console </a></li>
  </div>
</div>

CSS

#widgets {
margin: 15px 0px 50px 15px;
text-align: center;
}

#wrap {  
margin: 15px 15px 0px 0px;
text-align: left;
width: 300px;
height: 300px;
padding: 1px 20px 5px 20px;
background: #ffffff;
border: 1px solid #fff;
border-radius: 5px;
display: inline-block;
}

Answer 1

#wrapcss宣言にfloat：leftを追加するだけです。jsFiddleを更新しました。

#wrap { float: left; }

Answer 2

@Arman P.の答えは機能しますが、現在のようにfloatではなくinline-blockメソッドを使い続けたい場合は、次を追加するだけです。

#wrap {    
    vertical-align: top;
}