Thuộc tính lề CSS được sử dụng để đặt vùng lề xung quanh phần tử đã chọn xung quanh đường viền của nó. Thuộc tính margin là cách viết tắt của margin-top, margin-right, margin-bottom và margin-left.
Cú pháp
Cú pháp của thuộc tính margin CSS như sau -
Selector {
margin: /*value*/
} Các ví dụ sau minh họa thuộc tính lề CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body * {
display: flex;
float: left;
margin: 10px 15px;
border: thin solid;
text-align: center;
width: 40%;
border-radius: 5%;
box-shadow: 0 0 4px 1px grey;
}
p {
font-family: "Sim Sun", monospace;
background-color: lightcyan;
}
div {
font-family: Impact, cursive;
background-color: lightgreen;
}
</style>
</head>
<body>
<p>First demo text</p>
<div>A demo line goes like this..</div>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
margin: 5% 30%;
border: 12px double red;
padding: 0.5rem;
border-radius: 30px;
}
td:nth-child(even) {
background-color: lightblue;
}
td:nth-child(odd) {
background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html> Đầu ra
Điều này cho kết quả sau -
