Điểm khác nhau giữa margin và padding là gì ? Trong bài viết này chúng ta sẽ cùng nhau trả lời câu hỏi này, bởi vì ai khi mới học CSS cũng thấy mông lung với hai thuộc tính này. Chúng ta sẽ tìm hiểu điểm giống và khác giữa chúng.
Margin và Padding
Giống:
- Tạo khoảng cách giữa cách phần tử
Khác:
- margin tạo khoảng cách với phần tử so với lề
- padding tạo khoảng cách với phần tử so với đường viền border
- padding sẽ khiến kích thước vùng chứa phần tử thay đổi
Nếu không để thuộc tính border thì sẽ rất khó phân biệt.
Ok mình sẽ làm một ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Margin và Padding</title>
<style type="text/css">
h1{
color:red;
border: 2px solid blue;
margin: 20px;
display: inline-block;
}
h2{
color:red;
border: 2px solid blue;
padding:20px;
display: inline-block;
}
</style>
</head>
<body>
<h1> Phần tử margin</h1>
<h2> Phần tử padding</h2>
</body>
</html>Ở trên thì mình sử dụng thêm thuộc tính display:inline-block, tác dụng của thuộc tính này là biến thẻ block thành thẻ inline rồi lại biến inline thành block. Thêm bớt thuộc tính này để thấy sự khác biệt, từ đó sẽ ngộ ra chân lý. Tự mình ngộ ra chân lý sẽ tốt là người khác truyền chân lý vào đầu cho bạn.
Các bạn cứ thay đổi giá trị để thấy sự rõ hơn sự khác biệt, 10 20 30 40 px …
margin còn có
margin-top: căn lề trên
margin-bottom: căn lề dưới
margin-left: căn lề trái
margin-right: căn lề phải
tương tự với padding
padding-top: tạo vùng đệm trên
padding-bottom: tạo vùng đệm dưới
padding-left: tạo vùng đệm trái
padding-right: tạo vùng đệm phải
Chúng ta cũng có thể viết tắt:
margin: 10px 10px : căn lề trên dưới 10px trái phải 10px
margin: 10px 10px 10px 10px: căn lề trên 10px dưới 10 px trái 10px phải 10px
Tương tự với padding nhé
Okê xong rồi đấy, mình xin nhắc lại cái này làm nhiều sẽ quen tay thôi :D. Vậy là chúng ta đã phân biệt được padding và margin mình xin được kết thúc bài viết tại đây.
Xem các bài viết khác tại đây.
Để lại một bình luận