1行目のインデントを設定する方法-CSSチュートリアル-php.cn

1行目のインデントを設定する方法

不言

リリース： 2021-04-16 15:13:26

オリジナル

32403 人が閲覧しました

最初の行のインデントを設定する方法: 最初に HTML サンプルファイルを作成し、次に本文にテキストコンテンツを定義し、最後に「text-indent」属性を使用して最初の行のインデント効果を設定します。

1行目のインデントを設定する方法

#この記事の動作環境: Windows7 システム、Dell G3 コンピューター、HTML5&&CSS3。

この記事の内容は、HTML を使用して段落の最初の行をインデントするコードです。段落のインデントに必要な属性が text-indent であることを知っておく必要があります。詳細を見てみましょう。。コンテンツ。

構文形式:

text-indent: (インデント幅)

記述例:

p {text-indent:1em;}

ログイン後にコピー

コード例 1: 単一文字のインデント

"text-indent:1em" を指定すると、段落の先頭を 1 文字インデントします。

コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:1em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

ログイン後にコピー

(関連する推奨事項:

CSS 学習マニュアル )

結果の表示

Web を使用するブラウザで上記のHTMLファイルを表示します。以下のような効果が表示されます。段落の1行目が1文字インデントされていることが確認できます。

1行目のインデントを設定する方法

コード例 2: セミテキストインデント

「text-indent: 0.5 em」と指定すると、段落の先頭を 0.5 em ずつインデントできます。キャラクター。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:0.5em;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

ログイン後にコピー

結果の表示

Webブラウザを使用して上記のHTMLファイルを表示すると、以下のような効果が表示されます。段落の最初の行が縮小していることを確認します。

1行目のインデントを設定する方法

コード例 3: ピクセル指定

「text-indent:14px」を指定して、段落の先頭を 14 ピクセルだけインデントします。

コードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    p {text-indent:14px;} 
    </style>
</head>
<body>
    <p>但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>

    <p>临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。天长地久有时尽，此恨绵绵无绝期。
    但教心似金钿坚，天上人间会相见。临别殷勤重寄词，词中有誓两心知。七月七日长生殿，夜半无人私语时。在天愿作比翼鸟，在地愿为连理枝。</p>
</body>
</html>

ログイン後にコピー

結果の表示

Web ブラウザを使用して上記の HTML ファイルを表示すると、次のような効果が表示されます。段落の先頭のピクセル数がインデントされます。

1行目のインデントを設定する方法