【CSS】text-indent - テキストのインデント

CSSのtext-indentプロパティについて解説します。

検証環境

CSS

macOS

14.1

text-indent

text-indentは“テキストのインデント”のプロパティです。

基本構文

text-indent: 値;

サンプル

字下げ（px）

sample.html

<style>
p {
    ___ih_hl_start
    text-indent: 10px;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets. CSS is a programming language that decorates elements such as HTML and XML. You can set various properties such as text color, background, and size.
</p>

プレビュー

字下げ（em）

sample.html

<style>
p {
    ___ih_hl_start
    text-indent: 1.0em;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets. CSS is a programming language that decorates elements such as HTML and XML. You can set various properties such as text color, background, and size.
</p>

プレビュー

字下げ（%）

sample.html

<style>
p {
    ___ih_hl_start
    text-indent: 3%;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets. CSS is a programming language that decorates elements such as HTML and XML. You can set various properties such as text color, background, and size.
</p>

プレビュー