在制作網頁的過程中，我們常常會遇到下端空隙的問題。這個問題的產生是由于HTML元素的默認行為所引起的。解決這個問題的方法有很多種，其中一種是使用CSS。

下面我們來看一個例子，假設我們有如下一段HTML代碼：

<div class="demo">
<p>這是一段文字</p>
</div>

這段代碼會在頁面上渲染出一個帶有下端空隙的盒子。為了消除這個空隙，我們可以給div元素添加如下的樣式：

.demo {
display: flex;
flex-direction: column;
}

這段代碼使用了flex布局，將盒子內部元素的排列方向設置為縱向。由于我們只有一行元素，所以這個樣式并不會對元素的布局產生影響，但它確實能夠消除下端空隙。

下面我們再來看一個例子，假設我們有如下一段HTML代碼：

<ul class="demo">
<li>這是一個列表項</li>
<li>這是另一個列表項</li>
<li>這是又一個列表項</li>
</ul>

這段代碼會在頁面上渲染出一個帶有下端空隙的列表。為了消除這個空隙，我們可以給ul元素添加如下的樣式：

.demo {
overflow: hidden;
}

這段代碼使用了overflow屬性將ul元素的溢出部分隱藏起來，從而消除了下端空隙。

總之，消除下端空隙的方法有很多種，以上只是其中的兩種。需要根據具體的情況選擇合適的方法。希望本文能夠對你有所幫助。