如何使用 CSS 和 HTML 在多行文字的邊緣添加填充？

使用CSS 和HTML 在多行文字的邊緣添加填充

為了在不使用不間斷的情況下實現此效果標籤空格，我們可以利用CSS 和HTML 的組合。具體方法如下：

CSS:

#titleContainer {
    width: 520px;
}

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

h3 .heading {
    background-color: #000;
    color: #00a3d0;
}

h3 .subhead {
    background-color: #00a3d0;
    color: #000;
}

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

h3 {
    background-color: #000;
    color: #fff;
    display: inline;
    margin: 0;
    padding: 0;
}

h3 .indent {
    position: relative;
    left: -15px;
}

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

HTML:

<div>

HTML:

HTML:
3. 我們將文字包裝在 <div> 中id 為「titleContainer」以包含整個文字。
4. 我們將文字包裝在

   中。標記並定義整個

   的樣式以及嵌套的 具有「標題」和「副標題」類別的元素。

   為了建立行分隔，我們建立另一個 <div>;在

   內並使用行高、內邊距、左邊框和顯示對其進行樣式設定。這會在保持對齊的同時分隔行。

   我們將文字包裹在 中。使用“indent”類別並使用position:relative和left:-15px將文字向左移動，在行的開頭創建所需的填充。

   具有「subhead」類別的子文字是向左浮動並使用邊距定位以確保正確對齊。

   Internet Explorer (IE) 需要額外的樣式來修正小標題文字的邊距，該樣式包含在條件註解中。 此 CSS 和 HTML 解決方案提供了一種靈活且跨瀏覽器相容的方式，可以在每行文字的開頭和結尾添加填充，如之前提供的 Chrome 螢幕截圖所示。