Thuộc tính margin trong CSS
Trần Ngọc Thanh - 669
- 13/07/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
