首頁 >web前端 >css教學 >如何在 CSS 中為文字行添加填充?

如何在 CSS 中為文字行添加填充?

Patricia Arquette
Patricia Arquette原創
2024-11-06 19:09:03187瀏覽

How to Add Padding to Lines of Text in CSS?

在文字行中加入內邊距

在本文中,我們將探討如何在每行的開頭和結尾加上內邊距

CSS 解決方案

雖然似乎沒有直接的CSS 解決方案,但已經使用複雜的CSS 技術成功解決了這個問題。以下是經過充分測試的CSS 解決方案,適用於各種瀏覽器:

#titleContainer {
    width: 520px;
}

h3 {
    margin: 0;
    font-size: 42px;
    font-weight: bold;
    font-family: sans-serif;
}

/* Styling for main text line */
h3 .heading {
    background-color: #000;
    color: #00a3d0;
}

/* Styling for subhead line */
h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

/* Container for line separation */
div {
    line-height: 1.1;
    padding: 1px 0;
    border-left: 30px solid #000;
    display: inline-block;
}

/* Positioning of main text line */
h3 {
    background-color: #000;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 0;
}

/* Indentation for subhead line */
h3 .indent {
    position: relative;
    left: -15px;
}

/* Adjustments for subhead line */
h3 .subhead {
    padding: 0 15px;
    float: left;
    margin: 3px 0 0 -29px;
    outline: 1px solid #00a3d0;
    line-height: 1.15;
}

HTML 結構

HTML 結構應如下所示:

<div>

以上是如何在 CSS 中為文字行添加填充?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn