Thuộc tính CSS text-indent giúp chúng tôi đặt thụt lề dòng đầu tiên của một phần tử.
Cú pháp
Cú pháp của thuộc tính CSS text-indent như sau -
Selector {
text-indent: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính CSS text-indent.
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
margin: auto;
padding: 10px;
}
article {
text-indent: 25%;
background-color: darkseagreen;
padding: 15px;
font-size: 1.3em;
}
h3 {
text-indent: -0.8em;
}
</style>
</head>
<body>
<div>
<h3>Doing it our way. Nothing gonna turn us back now.</h3>
<article>
This is demo paragraph. This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph. This is demo paragraph.
This is demo paragraph. This is demo paragraph. This is demo paragraph. </article>
</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: none;
display: flex;
float: left;
text-indent: 23px;
background-image: url("https://www.tutorialspoint.com/angular4/images/angular-4.jpg");
font-size: 1.5em;
}
li {
border: thin solid;
}
</style>
</head>
<body>
<ul>
<li>This is demo text. This is demo text.</li>
<li>Angular 4 is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. </li>
<li>Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc</li>
<li>This is demo text. This is demo text.</li>
</ul>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
