CSS text-indentプロパティで文章のインデントを指定する

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
書き方 text-indent : 値
数値+単位 指定した単位で設定します。
マイナスの値を指定することができます。その場合左にずれます。
数値+% 包含ブロックの幅に対する割合です。
初期値 0

使用例

<!DOCTYPE html>
<html>
<head>
<style>
 .cftA {
    border: 1px solid #000;
    width: 250px;
    height: 50px;
    background: skyblue;
    text-indent: 20px;
  }
  
   .cftB {
    border: 1px solid #000;
    width: 250px;
    height: 50px;
    background: skyblue;
    text-indent: -20px;
  }
</style>
</head>
<body>
<p class="cftA">インデントの確認111</p>
<p class="cftB">インデントがマイナス値の確認</p>
</body>
</html>

結果
要素「cftA」にインデントを指定すると、数値の分(20px)右にずれます。
要素「cftB」にインデントを指定すると、マイナス数値の分(-20px)左にずれます。

CSS

Posted by arkgame