텍스트 들여쓰기 속성으로 알려진 CSS 들여쓰기 속성은 학교에서 작성한 에세이나 논문의 모든 단락 첫 줄에 있는 표준 들여쓰기와 유사합니다. 논문을 작성할 때 단락의 첫 줄을 들여쓰는 것처럼 모든 텍스트 블록의 첫 줄을 들여씁니다.
아래 코드 편집기는 픽셀(px) 단위로 텍스트 들여쓰기를 만드는 방법을 보여줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Indent CSS</title>
</head>
<style>
.example {
text-indent: 25px;
}
</style>
<body>
<p class="example">
Cat ipsum dolor sit amet, american bobtail. Scottish fold ragdoll, and savannah but thai. Bombay. Lion. British shorthair maine coon. Tom. Leopard cheetah abyssinian and ocicat or american shorthair, but birman donskoy. Ocelot. Devonshire rex cougar for kitten. American shorthair lion. Lynx. Balinese persian so norwegian forest sphynx malkin. Devonshire rex kitten panther. Leopard manx tom donskoy but russian blue, ocicat tabby.
</p>
<p class="example">
Tomcat malkin, and ocelot. Puma. Balinese . Panther lynx or american bobtail and turkish angora, manx cougar. Malkin scottish fold but sphynx russian blue, maine coon balinese . Ocicat sphynx devonshire rex, mouser bobcat. Kitty maine coon american bobtail havana brown.
</p>
<p class="example">
Birman sphynx ragdoll tabby so british shorthair. Persian bombay thai for birman. Kitty havana brown maine coon tomcat and himalayan, but donskoy. Tom american bobtail birman, and ragdoll or panther or leopard yet american bobtail. Devonshire rex ocicat and munchkin. Lion lynx norwegian forest munchkin, tiger yet cheetah. American bobtail persian. Cornish rex. Leopard. Havana brown savannah puma yet tabby american shorthair, puma but tom. Egyptian mau kitten and lynx, havana brown tom, and siberian munchkin. Ocelot siberian so cheetah. American bobtail tiger, and lion. Kitten russian blue yet ocicat mouser thai and lynx norwegian forest. Panther. Mouser thai egyptian mau but devonshire rex. Lion panther for kitten. Ocelot savannah yet leopard or sphynx. Ocicat savannah puma ragdoll thai for panther siamese.
</p>
</body>
</html>
이 예는 픽셀(px)이라는 절대 길이 단위를 보여줍니다. . em과 같이 상대적/반응형 길이 단위로 들여쓰기를 표현할 수도 있습니다. , 렘 , 다음 % 전체 요소/단락의 너비. ems, rems 및 %의 픽셀 크기를 바꿔서 어떤 일이 일어나는지 확인하십시오.