Thuộc tính margin trong CSS
Trần Thị Vân - 1289
- 13/07/2025
Chức năng của Thuộc tính margin trong CSS
Thuộc tính margin trong CSS dùng để canh khoảng cách giữa các cạnh của thẻ HTML với phần tử cha hoặc với phần tử HTML khác, giúp canh chỉnh khoảng cách của 4 cạnh trên, phải, dưới, trái của phần tử HTML so với phần tử HTML khác tùy theo ý muốn.
Cú pháp của Thuộc tính margin trong CSS
margin: giatri;
giatri: Giá trị là khoảng cách giữa 4 cạnh của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh 4 cạnh.
margin: giatri1 giatri2;
giatri1: chỉ định khoảng cách giữa cạnh trên và cạnh dưới của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh 2 cạnh.
giatri2: chỉ định khoảng cách giữa cạnh trái và cạnh phải của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh 2 cạnh.
margin: giatri1 giatri2 giatri3;
giatri1: chỉ định khoảng cách giữa cạnh trên của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh cạnh trên.
giatri2: chỉ định khoảng cách giữa cạnh trái và cạnh phải của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh 2 cạnh.
giatri2: chỉ định khoảng cách giữa cạnh dưới của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh cạnh dưới.
margin: giatri1 giatri2 giatri3 giatri4;
giatri1: chỉ định khoảng cách giữa cạnh trên của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh cạnh trên.
giatri2: chỉ định khoảng cách giữa cạnh phải của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh cạnh phải.
giatri3: chỉ định khoảng cách giữa cạnh dưới của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh cạnh dưới.
giatri4: chỉ định khoảng cách giữa cạnh trái của phần tử HTML so với phần tử cha hoặc so với các phần tử khác xung quanh cạnh trái.
Ví dụ Thuộc tính margin trong CSS
margin:5px; (Cách 4 cạnh 5px)
margin:5px 10px 15px 20px; (cách trên 5px, cách phải 10px, cách dưới 15px, cách trái 20px)
margin:5px 20px;(cách trên và dưới 5px, cách phải và trái 20px)
margin:5px 10px 20px; (cách trên 5px, cách phải cách trái 10px, cách dưới 20px)
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính margin trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; margin-bottom:10px; border:1px solid red}
div p {background:green;margin:0px;padding:0px;color:#fff}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính margin trong CSS</h1>
<p>Dùng để canh khoảng cách giữa các cạnh của thẻ HTML với phần tử cha hoặc với phần tử HTML khác, giúp canh chỉnh khoảng cách của 4 cạnh trên, phải, dưới, trái của phần tử HTML so với phần tử HTML khác tùy theo ý muốn:</p>
<div><p style="margin:5px" >margin:5px (Cách 4 cạnh 5px)</p></div>
<div><p style="margin:5px 10px 15px 20px" >margin:5px 10px 15px 20px (cách trên 5px, cách phải 10px, cách dưới 15px, cách trái 20px)</p></div>
<div><p style="margin:5px 20px" >margin:5px 20px(cách trên và dưới 5px, cách phải và trái 20px)</p></div>
<div><p style="margin:0px 20px" >margin:0px 20px(cách trên và dưới 0px, cách phải và trái 20px)</p></div>
<div style="margin:30px 0px"><p>margin:30px 0px(cách trên và dưới 30px, cách phải và trái 0px)</p></div>
<div><p style="margin:5px 10px 20px" >margin:5px 10px 20px (cách trên 5px, cách phải cách trái 10px, cách dưới 20px)</p></div>
</body>
</html>
Những lưu ý khi sử dụng margin trong CSS
Margin không chỉ đơn giản là tạo khoảng cách giữa các phần tử. Một số cách sử dụng đặc biệt có thể làm thay đổi vị trí hoặc cách các phần tử tương tác với nhau trong bố cục. Hiểu rõ những trường hợp này sẽ giúp hạn chế lỗi khoảng cách khó đoán khi xây dựng giao diện.
Margin có thể nhận giá trị âm
CSS cho phép đặt margin bằng giá trị âm để kéo một phần tử dịch chuyển gần hoặc chồng lên khu vực của phần tử khác. Cách này hữu ích khi cần tinh chỉnh bố cục mà không muốn thay đổi kích thước nội dung bên trong.
Ví dụ, có thể dùng margin-top âm để đưa một khối lên phía trên so với vị trí thông thường:
.box {
margin-top: -20px;
}
Tuy nhiên, margin âm nên được sử dụng có chủ đích. Nếu lạm dụng, bố cục có thể trở nên khó kiểm soát khi kích thước màn hình hoặc nội dung thay đổi.
Margin có thể sử dụng giá trị auto
Giá trị auto cho phép trình duyệt tự phân bổ phần không gian còn lại của phần tử. Trường hợp phổ biến là dùng margin: 0 auto để căn giữa một khối có chiều rộng xác định theo chiều ngang.
.container {
width: 800px;
margin: 0 auto;
}
Cách này đặc biệt phù hợp với các khối nội dung có chiều rộng giới hạn. Khi sử dụng auto, cần chú ý kích thước của phần tử và không gian mà phần tử cha cung cấp để tránh kết quả khác với mong muốn.
Margin giữa các phần tử có thể xảy ra hiện tượng gộp khoảng cách
Với một số phần tử dạng block, margin theo chiều dọc có thể xảy ra hiện tượng margin collapse. Khi hai margin dọc tiếp xúc nhau, chúng không nhất thiết được cộng trực tiếp thành tổng của hai giá trị.
Ví dụ, nếu một phần tử có margin-bottom: 30px và phần tử kế tiếp có margin-top: 20px, khoảng cách thực tế có thể là 30px thay vì 50px.
.box-one {
margin-bottom: 30px;
}
.box-two {
margin-top: 20px;
}
Đây là nguyên nhân thường khiến khoảng cách giữa các khối không giống với phép cộng đơn giản. Khi gặp trường hợp này, nên kiểm tra margin theo chiều dọc của các phần tử liên quan thay vì tiếp tục tăng giá trị một cách tùy ý.
Margin và padding không có cùng cách hoạt động
Margin tạo khoảng cách bên ngoài đường viền của phần tử, còn padding tạo khoảng trống giữa nội dung và đường viền. Hai thuộc tính đều tạo khoảng cách nhưng tác động lên những khu vực khác nhau của box model.
.box {
margin: 20px;
padding: 20px;
}
Trong ví dụ trên, margin tạo khoảng cách giữa .box và các phần tử bên ngoài, trong khi padding tạo khoảng trống bên trong .box. Phân biệt đúng hai thuộc tính này giúp bố cục dễ kiểm soát và hạn chế việc dùng margin để xử lý những khoảng cách vốn thuộc về phần nội dung bên trong.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
