Giới thiệu về Margin và Padding
Nếu bạn mới bắt đầu làm quen với CSS, bạn có thể đã nghe nói về margin và padding nhưng không biết chính xác ý 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ế layout, nhưng chúng vẫn có những khác biệt quan trọng trong cách sử dụng. Khi bạn hiểu rõ sự khác biệt giữa margin và padding, bạn sẽ có thể đưa ra quyết định tốt hơn cho thiết kế trang web của mình. Trong bài viết này, chúng ta sẽ cùng tìm hiểu về cách margin và padding hoạt động thông qua những ví dụ cụ thể.
Margin
Margin là khoảng cách 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 không có màu nền và hoàn toàn trong suốt. Chức năng 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ử trông như thế nào và cách nó được đặt bên trong một container. Khi một phần tử có thuộc tính padding, khoảng trống giữa nội dung bên trong phần tử và lề 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ử. Padding cũng có thể thay đổi kích thước của phần tử, mặc định thì kích thước của phần tử sẽ tăng lên.
Khi bạn điều chỉnh bố cục của thiết kế, bạn cần quyết định xem nên điều chỉnh margin hay padding. Nếu chiều rộng của trang được cố định, bạn có thể dễ dàng căn giữa một phần tử theo chiều ngang bằng cách 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ử liền kề. Nếu bạn muốn tạo khoảng trống giữa phần tử và cạnh của vùng chứa hoặc đường viền, bạn sẽ sử dụng 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 khi bạn 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 khi bạn muốn 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>Trong ví dụ trên, chúng ta sử dụng margin: auto để căn giữa phần tử có class là “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>Trong đoạn mã trên, chúng ta sử dụng padding cho thẻ h3 để thay đổi khoảng cách giữa nội dung và các lề của phần tử. Dưới đây là kết quả:
Một lưu ý nhỏ là khi bạn thêm padding mà 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 kích thước của padding.
Kết luận
Margin và padding có chức năng tương tự nhau trong việc thay đổi khoảng cách. Tuy nhiên, chúng có những điểm khác biệt quan trọng:
- Margin thay đổi khoảng cách bên ngoài của phần tử mà không làm thay đổi kích thước của phần tử, trong khi padding thay đổi khoảng cách của nội dung bên trong phần tử và làm thay đổi kích thước của phần tử.
- Margin chấp nhận các giá trị âm và số thực, trong khi padding không chấp nhận các giá trị âm.
- Margin có thuộc tính “auto”, trong khi padding không có thuộc tính này.
- Margin không có màu nền, trong khi 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, chúng ta đã hiểu hơn về margin và padding và cách áp dụng chúng một cách chính xác trong việc thiết kế giao diện.
