如何使用 CSS 和 HTML 在多行文字的邊緣添加填充？-css教學-PHP中文網

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

Linda Hamilton

發布： 2024-11-08 07:28:02

原創

750 人瀏覽過

How can I add padding to the edges of multi-line text using CSS and 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:

我們將文字包裝在 <div> 中id 為「titleContainer」以包含整個文字。
我們將文字包裝在
中。標記並定義整個
的樣式以及嵌套的具有「標題」和「副標題」類別的元素。
為了建立行分隔，我們建立另一個 <div>;在
內並使用行高、內邊距、左邊框和顯示對其進行樣式設定。這會在保持對齊的同時分隔行。

我們將文字包裹在中。使用“indent”類別並使用position:relative和left:-15px將文字向左移動，在行的開頭創建所需的填充。
具有「subhead」類別的子文字是向左浮動並使用邊距定位以確保正確對齊。
Internet Explorer (IE) 需要額外的樣式來修正小標題文字的邊距，該樣式包含在條件註解中。此 CSS 和 HTML 解決方案提供了一種靈活且跨瀏覽器相容的方式，可以在每行文字的開頭和結尾添加填充，如之前提供的 Chrome 螢幕截圖所示。

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

中。標記並定義整個

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