Parent element is adding unnecessary whitespace

Question

I am making an image slider and for some reason the parent element is adding whitespace at the bottom of parent div for no reason that I can tell. If there is a better way to set up the css then I would really appreciate a pointer. Here is the code:

HTML:

<div id="imgslider">
    <ul class="bxslider">
        <li>
            <img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-11.jpg" alt="" />
        </li>
        <li>
            <img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-1.jpg" alt="" />
        </li>
    </ul>
<div class="clear"></div>

CSS:

#imgslider {
    display: block;
    height: inherit;
}
.bxslider {
    position: relative;
}
.bxslider img {
    width: 100%;
    max-height: 750px;
    position: absolute;
}
.bxslider img:first-child {
    top: 0;
    left: 0;
    z-index: 1;
}

Answer 1

There is a not closed div at the end :-) Maybe this is what causing the issue:

    <div id="imgslider">
        <ul class="bxslider">
            <li>
                <img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-11.jpg" alt="" />
            </li>
            <li>
                <img src="http://localhost:8888/wordpress/wp-content/uploads/2015/08/DevelopImages_PureTisanes_LowRes-1.jpg" alt="" />
            </li>
        </ul>
</div>
    <div class="clear"></div>

Answer 2

Not sure it will help but i have read somewhere " clear:both " cause adding some space at bottom so you may want to add " overflow:hidden " to the parent div (i think it is the div with id " imgslider ")

#imgslider {
    display: block;
    height: inherit;
    overflow:hidden;
}