Thuộc tính margin-top trong CSS
Bùi Tấn Lực - 889
- 07/10/2025
Chức năng của Thuộc tính margin-top trong CSS
Thuộc tính margin-top trong CSS dùng để canh khoảng cách cạnh trên của phần tử HTML so với các phần tử HTML ở trên nó hoặc so với phần tử HTML chứa nó.
Cú pháp của Thuộc tính margin-top trong CSS
margin-top: giatri;
giatri: Giá trị để canh khoảng cách cạnh trên của phần tử HTML so với các phần tử HTML ở trên nó hoặc so với phần tử HTML chứa nó (Ví dụ: 0px, 10px, 10%,....)
Code Thuộc tính margin-top trong CSS
margin-top: 20px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 20px)
margin-top: 0px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)
margin-top: 5%; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 5%)
margin-top: -5px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha -5px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-top 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;border:1px solid red}
div.divcha{margin-top:10px;}
p {background:green;margin:0px;padding:0px;color:#fff}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-top trong CSS</h1>
<span>Canh khoảng cách cạnh trên của phần tử HTML so với các phần tử HTML ở trên nó hoặc so với phần tử HTML chứa nó:</span>
<div class="divcha"><p style="margin-top: 20px" >margin-top: 20px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 20px)</p></div>
<div class="divcha"><p style="margin-top: 5%" >margin-top: 5%; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 5%)</p></div>
<div class="divcha"><p style="margin-top: 0px" >margin-top: 0px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)</p></div>
<div class="divcha"><p style="margin-top: 0" >margin-top: 0; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)</p></div>
<div class="divcha"><p style="margin-top: auto" >margin-top: auto; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)</p></div>
<div class="divcha"><p style="margin-top: revert" >margin-top: revert</p></div>
<div class="divcha"><p style="margin-top: -5px" >margin-top: -5px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha -5px)</p></div>
<div style="margin-top: 20px" >margin-top: 20px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 20px)</div>
</body>
</html>
Những trường hợp thường gặp khi sử dụng margin-top trong CSS
Trong quá trình thiết kế giao diện, margin-top đôi khi không tạo khoảng cách đúng như mong đợi dù cú pháp CSS không có lỗi. Nguyên nhân thường nằm ở cách các phần tử tương tác với nhau, đặc biệt là khi có margin collapse hoặc khi cần phân biệt khoảng cách bên ngoài với khoảng đệm bên trong.
Vì sao margin-top không tạo khoảng cách như mong muốn?
Một nguyên nhân phổ biến là margin collapse, xảy ra khi margin theo chiều dọc của các phần tử trong cùng luồng bố cục có thể gộp lại thay vì cộng dồn. Vì vậy, đặt margin-top cho phần tử con chưa chắc sẽ tạo khoảng trống theo đúng cách bạn hình dung.
Ngoài ra, khoảng cách còn có thể bị ảnh hưởng bởi margin của phần tử đứng trước, chiều cao của phần tử cha hoặc cách bố trí như flex và grid. Khi gặp trường hợp này, nên kiểm tra lần lượt margin của các phần tử liên quan thay vì chỉ tăng giá trị margin-top.
Khi nào nên dùng margin-top và khi nào nên dùng padding-top?
margin-top phù hợp khi cần tạo khoảng cách giữa một phần tử với thành phần nằm phía trên nó. Ngược lại, padding-top tạo khoảng trống từ mép trên của chính phần tử đến nội dung bên trong.
Có thể hiểu đơn giản: margin điều chỉnh khoảng cách bên ngoài, còn padding điều chỉnh khoảng đệm bên trong. Chọn đúng thuộc tính sẽ giúp bố cục dễ kiểm soát hơn và hạn chế việc phải dùng nhiều giá trị bù trừ.
Cách xử lý margin-top bị ảnh hưởng bởi phần tử cha
Khi margin-top của phần tử con làm thay đổi vị trí của cả phần tử cha, vấn đề thường liên quan đến cơ chế gộp margin theo chiều dọc. Thay vì tiếp tục tăng hoặc giảm giá trị margin, nên xem xét cấu trúc bố cục và xác định khoảng cách đó thực sự thuộc về phần tử cha hay phần tử con.
Nếu khoảng trống cần nằm bên trong phần tử cha, padding-top thường là lựa chọn phù hợp hơn. Cách này giúp tách rõ khoảng đệm của container khỏi khoảng cách giữa các phần tử, từ đó bố cục ổn định và dễ bảo trì hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-top 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 *
