父元素添加了不必要的空格

Question

我正在制作圖像滑塊，由於某種原因，父元素無緣無故告訴父div底部添加了空格。 如果有更好的方法來設置CSS，那么我真的很感謝一個指針。 這是代碼：

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

末尾有一個未關閉的div :-)也許這是導致問題的原因：

    <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

不確定是否會有所幫助，但是我已經讀過“ clear：both ”，在底部添加了一些空間，因此您可能想向父div添加“ overflow：hidden ”（我認為它是ID為“ imgslider ”的div）

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