Khi lần đầu tiên tôi bắt đầu học cách viết đánh dấu bằng HTML và CSS, phải mất một thời gian để thực sự suy nghĩ về sự khác biệt giữa lề và đệm trong mô hình hộp. Trong bài viết này, tôi sẽ chia sẻ cách cuối cùng tôi có thể phân biệt giữa hai loại thuốc này.
Khi nói về margin và padding, tốt nhất là bạn nên xem lại cách hoạt động của mô hình CSS box. Hãy nghĩ về mô hình hộp - các hộp chứa mà chúng tôi đặt các thành phần của trang web của mình vào - như một bức tranh đã được đặt trong khung ảnh:
Nội dung là chính bức tranh - thứ mà chúng tôi muốn đưa vào thùng chứa. Chỉ bao quanh nó là padding .
Nếu chúng ta ở trong một cửa hàng khung tranh, tấm đệm sẽ là tấm lót, dẫn đến nhu cầu về một khung tranh lớn hơn. Khi chúng tôi thêm phần đệm trong CSS, về cơ bản, chúng tôi đẩy hộp nội dung của mình ra để làm cho vùng chứa lớn hơn. Phần đệm là khoảng trống ở giữa nội dung và đường viền.
Tiếp theo là đến đường viền - về cơ bản nó là khung chứa nội dung và phần đệm của chúng ta. Lề là không gian giữa các phần tử liền kề (khung ảnh của chúng ta) trên khung nhìn của chúng ta (bức tường).
Vì vậy, câu hỏi trở thành: khi nào chúng ta nên sử dụng margin và khi nào chúng ta nên sử dụng padding?
Một số người có thể cho rằng câu trả lời cho điều này hơi chủ quan, nhưng nói chung, bạn nên sử dụng lề CSS nếu chúng ta muốn điều chỉnh cách một phần tử trông như thế nào so với các phần tử khác trên trang. Padding nên được sử dụng khi chúng ta muốn không gian xung quanh nội dung lớn hơn.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Đặt lề và đệm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Margin vs Padding</title>
</head>
<style>
body {
background: darkslategray;
width: 100%;
height: 100vh;
max-width: 800px;
display: flex;
margin: 0 auto;
justify-content: space-evenly;
align-items: center;
}
#star-wars {
background: ivory;
border: 20px solid cyan;
}
#lotr {
background: ivory;
border: 20px solid green;
}
</style>
<body>
<div id="star-wars">
<h3>Star Wars Chars</h3>
<div>
<p>Hans Solo</p>
<p>Luke Skywalker</p>
<p>Obi Wan Kenobi</p>
<p>Chewbacca</p>
<p>R2D2</p>
<p>C3PO</p>
</div>
</div>
<div id="lotr">
<h3>Lord of the Rings Chars</h3>
<div>
<p>Bilbo</p>
<p>Gandalf</p>
<p>Frodo</p>
<p>Sam</p>
<p>Legolas</p>
<p>Aragorn</p>
</div>
</div>
</body>
</html>
Trong trình chỉnh sửa mã ở trên, hai hộp có nền, nội dung và đường viền cơ bản được đặt. Hãy tưởng tượng một kịch bản mà bạn muốn phần đệm và phần lề khác nhau ở mọi phía. Trong <style> , hãy thử sử dụng các kích thước khác nhau trên tất cả các mặt, như sau:
#star-wars {
background: ivory;
border: 20px solid cyan;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin-top: 10px;
margin-bottom: 30px;
margin-left: 5px;
margin-right: 25px;
padding-top: 20px;
padding-right: 25px;
padding-bottom: 35px;
padding-left: 45px;
}
Như đã nói, có một cách viết tắt mà bạn có thể sử dụng:margin: 10px 25px 30px 5px; các con số đang gặp sự cố (TRBL): trên cùng, bên phải, dưới cùng và bên trái! Đây là thứ tự bạn sẽ tìm thấy không chỉ lề và phần đệm, mà còn khá nhiều thuộc tính sử dụng tốc ký để mô tả các cạnh của hộp của bạn.
Rất có thể, bạn sẽ có một kịch bản trong đó lề / phần đệm trên cùng và dưới cùng sẽ giống nhau và các lề bên trái và bên phải sẽ giống nhau. Nếu điều đó xảy ra, bạn có thể sử dụng một phím tắt:
#star-wars {
background: ivory;
border: 20px solid cyan;
margin: 20px 30px;
padding: 30px 20px;
}
#lotr {
background: ivory;
border: 20px solid green;
margin: 20px 30px;
padding: 30px 20px;
Số đầu tiên là lề / đệm trên cùng và dưới cùng và số thứ hai là lề / đệm trái và phải.
Nếu tất cả các cạnh đều giống nhau, bạn chỉ cần nói padding: 30px; or margin: 30px;
Kết luận
Trong bài viết này, chúng tôi đã xem xét các khía cạnh của mô hình hộp và thảo luận về sự khác biệt giữa lề và đệm. Hãy nhớ rằng lề xử lý với không gian bên ngoài đường viền và đệm liên quan đến không gian bên trong đường viền. Tiếp tục chơi với lề và đệm của vùng chứa trong trình chỉnh sửa mã ở trên và bạn sẽ nhanh chóng trở thành bậc thầy trong việc thiết lập lề và đệm.