「CSS」text-indentプロパティのサンプル

2022年4月14日

環境
Google Chrome 100.0.4896.88
Windows10 home 64bit

書式
text-indent: 数値px;
数値+単位指定した単位で設定します。マイナスの値を指定することができます。その場合左にずれます。
数値+% 包含ブロックの幅に対する割合です。
使用例

<!DOCTYPE html>
<html>
<head>
<title>インデントを30pxで指定する</title>
</head>
<body>
<style>
  .cft {
    border: 2px solid #000;
    width: 260px;
    height: 55px;
    background: LightCyan;
    text-indent: 30px;
  }
</style>
<p class="cft">インデントのサンプル</p>

</body>
</html>

結果　インデントを指定すると、数値の分右にずれます。

CSS

Posted by arkgame

関連記事: