如何增加 CSS 中帶下劃線的文字和底線之間的間距？

使用 CSS 增強底線間隙

在文字及其下劃線之間創建視覺區別對於可讀性至關重要。雖然 CSS 提供了 text-decoration:underline 屬性來為文字添加下劃線，但它沒有提供任何直接的方法來調整文字和線條之間的間隙。

替代解決方案

相反，請考慮使用具有實心樣式和非零寬度的 border-bottom 屬性。這會在文字下方建立一個邊框，有效地模仿下劃線。此外，套用 padding-bottom 會增加文字和邊框之間的垂直空間，從而產生更大間隙的錯覺。

例如，以下程式碼範例在文字下方建立一個1px 的黑色邊框，並帶有3px 的填充下方：

border-bottom: 1px solid #000;
padding-bottom: 3px;

顏色自訂

如果你想要邊框color 來匹配文字顏色，只需省略顏色聲明，得到border-bottom-width: 1px 和 border-bottom-style: Solid。

多行文本處理

對於多行文本，將其包裝在嵌套在主元素內的 span 元素中。隨後，將 border-bottom 和 padding 屬性套用至 span 元素。該技術有效地擴展了多行場景中文字和下劃線之間的間隙。

以上是如何增加 CSS 中帶下劃線的文字和底線之間的間距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！