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

Lề và đệm CSS

Đối với lề, hãy sử dụng thuộc tính lề CSS. Thuộc tính margin xác định không gian xung quanh phần tử HTML.

Đối với padding, thuộc tính padding cho phép bạn chỉ định khoảng cách sẽ xuất hiện giữa nội dung của một phần tử và đường viền của phần tử đó.

Sau đây là đoạn mã hiển thị lề và đệm trong CSS -

Ví dụ

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.outer-div {
   border: 2px solid purple;
   width: 300px;
   height: 200px;
}
.inner-div {
   border: 2px solid green;
   margin: 20px;
   padding-left: 20px;
}
</style>
</head>
<body>
<h1>Margin and padding example</h1>
<div class="outer-div">
<div class="inner-div">
Some sample text inside the inner div which will be padded by 20px all sides.
</div>
</div>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Lề và đệm CSS