在網頁設計中，經常需要使用下劃線來突出文字。而如何調整下劃線與文字之間的距離，便是我們要討論的問題。

在 CSS 中，下劃線被稱為 text-decoration 中的一個屬性。我們可以通過 text-decoration-line 設置下劃線的樣式，比如 solid、dotted、double 等。同時，text-decoration-color 和 text-decoration-thickness 屬性也可用于設置下劃線的顏色和寬度。

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-thickness: 3px;
}

然而，由于默認情況下下劃線與文字之間的距離相對較小，可能不符合我們的設計需求。這時，我們可以通過 text-decoration-skip 屬性設置下劃線的跳躍值，實現下劃線與文字之間的間距。

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-thickness: 3px;
text-decoration-skip: ink;
}

其中，text-decoration-skip 屬性有多個取值，ink 表示下劃線頂部跳過文字的任何間距；spaces 表示跳過連續的空格或 Tab 鍵。除此之外，我們還可以使用某些關鍵詞，如 none 表示不跳過任何內容，objects 表示跳過其他與文字有重疊的元素。

除了使用 text-decoration-skip 屬性外，我們還可以通過 margin 和 padding 屬性來調整下劃線的位置。需要注意的是，我們需要為懸停狀態設置下劃線的位置。

p {
border-bottom: 3px solid red;
padding-bottom: 10px;
margin-bottom: 20px;
}
p:hover {
border-bottom: 3px solid blue;
padding-bottom: 15px;
margin-bottom: 25px;
}

通過上述方法，我們便可以調整下劃線與文字之間的距離，實現更美觀的設計。