Computer >> Máy Tính >  >> Lập trình >> CSS

Cách sử dụng Text-Indent trong CSS

Thuộc tính thụt lề CSS, được gọi là thuộc tính thụt lề văn bản, xuất hiện tương tự như thụt lề tiêu chuẩn trên dòng đầu tiên của mỗi đoạn trong một bài luận hoặc bài báo mà bạn có thể đã viết ở trường; nó thụt lề dòng đầu tiên của mỗi khối văn bản giống như bạn sẽ thụt lề dòng đầu tiên của đoạn văn khi viết bài.

Trình chỉnh sửa mã dưới đây cho biết cách tạo thụt lề văn bản theo pixel (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>

Ví dụ này cho bạn thấy một đơn vị độ dài tuyệt đối được gọi là pixel (px) . Bạn cũng có thể thể hiện thụt lề trong các đơn vị độ dài tương đối / đáp ứng như em , rem rồi đến % chiều rộng của phần tử / đoạn văn tổng thể. Hãy thử hoán đổi kích thước pixel cho ems, rems và% để xem điều gì sẽ xảy ra.