Underscore affecting styling

Question

Im trying to learn Backbone and it seems that underscore.js is affecting my styling:

My project is a trello clone. A Project has many Buckets which have many Tasks. Some attributes dont have a name or any tasks and this seems to be messing up the styling. Has anyone come across this before?

Here is the template code:

<script type="text/template" id="project-show-template">
    <div>
        <h2>View <%%= project.name %>(<%%= project.token %>)</h2>
        <div class="buckets">
            <%% _.each(project.buckets, function(bucket) { %>  
              <%%= _.template($('#bucket-show-template').html())({bucket: bucket}) %>
            <%% }); %>
        </div>
    </div>
</script>


<script type="text/template" id="bucket-show-template">
    <div class="bucket bucket-<%%= bucket.id %>">
        <%% if (bucket.name) { %>
            <h3><%%= bucket.name %></h3>
        <%% } %>
        <ul class="tasks">
            <%% _.each(bucket.tasks, function(task) { %>  
              <%%= _.template($('#task-show-template').html())({task: task}) %>
            <%% }); %>
        </ul>
    </div>
</script>

<script type="text/template" id="task-show-template">
        <li><%%= task.name %></li>
</script>

What is causing this styling to not be consistent?

EDIT: CSS added

.bucket {
    display: inline-block;
    min-width: 200px;
    min-height: 150px;
    padding: 5px;
    margin: 5px;
    background-color: #ddd;
    cursor: pointer;
}

Answer 1

Adding @Vucko's comment as an answer for completeness sake:

Add vertical-align: top to .bucket. For inline-block the default styling is baseline, which makes the result like yours.