Giới thiệu
Nếu bạn mới bắt đầu làm quen với CSS, chắc hẳn bạn đã nghe qua hai từ “margin” và “padding” nhưng chưa chắc chắn về ý nghĩa và cách sử dụng chúng trong thiết kế trang web. Dù margin và padding có chức năng tương tự nhau trong việc thiết kế bố cục cho trang web, nhưng chúng không hoàn toàn giống nhau và có những điểm khác biệt cơ bản quan trọng. Để có thể đưa ra quyết định tốt hơn cho việc thiết kế website của bạn, hãy hiểu rõ sự khác biệt giữa margin và padding thông qua các ví dụ cụ thể.
Margin
Margin là khoảng trống xung quanh một phần tử. Nó được sử dụng để di chuyển phần tử lên, xuống, sang trái hoặc sang phải trên trang web. Margin là không gian trong suốt và không có màu sắc nền. Mục đích chính của margin là tạo khoảng cách giữa các phần tử liền kề với phần tử chứa thuộc tính margin.
Padding
Padding là khoảng trống giữa phần tử và nội dung bên trong nó. Padding xác định cách phần tử sẽ hiển thị và được đặt trong một container. Khi một phần tử có thuộc tính padding, khoảng cách giữa nội dung bên trong phần tử và viền của phần tử sẽ tăng lên và màu nền của padding sẽ phụ thuộc vào màu nền của phần tử. Thay đổi padding có thể làm thay đổi kích thước của phần tử, mặc định là tăng lên.
Khi bạn điều chỉnh bố cục thiết kế của mình, bạn cần xác định xem có nên điều chỉnh margin hay padding. Nếu chiều rộng của trang của bạn được cố định, căn giữa một phần tử theo chiều ngang rất đơn giản, chỉ cần gán giá trị margin: auto. Bạn cũng có thể sử dụng margin để tạo khoảng cách giữa các phần tử lân cận. Nếu bạn muốn tạo khoảng cách giữa phần tử và cạnh của vùng chứa hoặc đường viền, bạn sẽ thay đổi padding. Margin cũng có thể được sử dụng để tạo khoảng cách giữa hình ảnh và mô tả của hình ảnh đó.
CSS Padding được sử dụng nếu chúng ta muốn tạo khoảng cách giữa một phần tử và cạnh của vùng chứa hoặc đường viền. Nó cũng hữu ích trong yêu cầu thay đổi kích thước của phần tử.
Ví dụ về margin
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
background: lime;
width: 66%;
}
.outside {
margin: 3rem 0 0 -3rem;
background: cyan;
width: 66%;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p class="center">This element is centered.</p>
<p class="outside">The element is positioned outside of its corner.</p>
</body>
</html>Ví dụ trên sử dụng margin: auto để căn giữa phần tử có class “center”. Dưới đây là kết quả:
Ví dụ về padding
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<h4>This element has moderate padding.</h4>
<h3>The padding is huge in this element!</h3>
</body>
</html>Ở đoạn mã trên, chúng tôi sử dụng padding cho thẻ h3 để thay đổi khoảng cách giữa nội dung với các lề của phần tử. Dưới đây là kết quả:
Một lưu ý nhỏ là khi thêm padding mà bạn không cố định chiều rộng và chiều cao của phần tử, kích thước của phần tử sẽ phụ thuộc vào độ lớn của padding.
Tóm tắt
Margin và padding là hai thuộc tính trong CSS dùng để thay đổi khoảng cách giữa các phần tử. Tuy nhiên, chúng có những điểm khác nhau quan trọng. Dưới đây là một vài điểm khác biệt giữa chúng:
Margin
- Thay đổi khoảng cách bên ngoài của phần tử so với các phần tử khác mà không làm thay đổi kích thước của phần tử.
- Chấp nhận cả số âm và số thực.
- Có thể sử dụng thuộc tính “auto” trong margin.
- Không có màu nền.
Padding
- Thay đổi khoảng cách của nội dung bên trong phần tử so với các lề của nó và làm thay đổi kích thước của phần tử.
- Không chấp nhận các giá trị âm.
- Không có thuộc tính “auto” trong padding.
- Màu nền của padding phụ thuộc vào màu nền của phần tử.
Qua bài viết này, hy vọng rằng bạn hiểu rõ hơn về margin và padding và có thể áp dụng chúng một cách chính xác trong việc thiết kế giao diện.