「CSS」text-indentプロパティをマイナス値で指定しインデントを設定する
環境
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: 200px;
height: 55px;
background: LightCyan;
text-indent: -30px;
}
</style>
<p class="cft">インデントをインデントがマイナス値</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>インデントを30pxで指定する</title>
</head>
<body>
<style>
.cft {
border: 2px solid #000;
width: 200px;
height: 55px;
background: LightCyan;
text-indent: -30px;
}
</style>
<p class="cft">インデントをインデントがマイナス値</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>インデントを30pxで指定する</title>
</head>
<body>
<style>
.cft {
border: 2px solid #000;
width: 200px;
height: 55px;
background: LightCyan;
text-indent: -30px;
}
</style>
<p class="cft">インデントをインデントがマイナス値</p>
</body>
</html>
結果
インデントがマイナス値の場合、左にずれます。