CSS cho phép chúng tôi đặt đệm cụ thể bên cho các phần tử. Các thuộc tính padding-top, padding-right, padding-bottom và padding-right lần lượt xác định phần đệm trên cùng, bên phải, dưới cùng và bên trái. Thuộc tính tốc ký padding cũng có thể được sử dụng để đạt được cùng một đầu ra bằng cách chỉ định các giá trị theo hướng đồng hồ.
Cú pháp
Cú pháp của thuộc tính đệm CSS như sau -
Selector {
padding-top: /*value*/
padding-right: /*value*/
padding-bottom: /*value*/
padding-left: /*value*/
} Các ví dụ sau minh họa kiểu danh sách -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 2em 1em;
padding: 3%;
background-color: plum;
letter-spacing: 0.05em;
}
span {
padding: 0 53%;
border-right: dashed;
background-image: linear-gradient(to right, lavenderblush, lightblue);
font-size: 1.4em;
font-style: italic;
}
</style>
</head>
<body>
<h2>What is Xamarin?</h2>
<article>
<span>Xamarin is a software company based in San Francisco. Xamarin is built on the .NET Framework.</span> It provides commercial software development tools that allow a user to develop applications for Android, iOS and Windows using C# language and the .NET framework.
</article>
</body>
</html> Đầu ra
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
padding-left: 30px;
padding-top: 44px;
padding-bottom: 60px;
background-image: linear-gradient(to bottom, oldlace, lightblue);
border: thin solid;
text-align: center;
}
div > div {
padding-right: 70px;
}
</style>
</head>
<body>
<h2>Swift programming language by Apple</h2>
<div>Swift is a programming language developed by Apple Inc for iOS and OS X development.
<div>Swift 4 uses the same runtime as the existing Obj-C system on Mac OS and iOS, which enables Swift 4 programs to run on many existing iOS 6 and OS X 10.8 platforms.
</div>
</div>
</body>
</html> Đầu ra
