Thuộc tính lề CSS là cách viết tắt của margin-top, margin-right, margin-bottom và margin-left. Nó cho phép chúng tôi xác định không gian xung quanh các phần tử. Chúng tôi cũng có thể đặt lợi nhuận cho từng bên.
Cú pháp
Cú pháp của thuộc tính margin CSS như sau -
Selector {
margin: /*value*/
} Ví dụ
Các ví dụ sau minh họa thuộc tính lề CSS -
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px 50px 20px;
padding: 1rem;
border: dashed;
}
p {
text-align: center;
}
#demo {
margin-left: -80px;
box-shadow: inset 0 0 10px brown;
}
</style>
</head>
<body>
<div></div>
<p>This is demo text.</p>
<p id="demo">Another demo text.</p>
<p>This is new demo text.</p>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: auto;
background-image: linear-gradient(to right, khaki, aliceblue, skyblue, rebeccapurple);
width: 20em;
}
li {
margin-top: 3px;
}
li + li {
margin-left: -20px;
}
li:last-child {
margin-left: 75px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<ul>
<li>This is demo list item.</li>
<li>This is another list item with different style.</li>
<li>This is our third demo text with another style.
</li>
</ul>
</body>
</html> Dàn ý
Điều này cho kết quả sau -
