Bùi Tấn Lực - 164
- 08/10/2025
Bùi Tấn Lực Thuộc tính margin-block trong CSS dùng để canh khoảng cách giữa cạnh dưới và cạnh trên của phần tử HTML so với các phần tử HTML xung quanh 2 cạnh, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính margin-block trong CSS
Chức năng của Thuộc tính margin-block trong CSS
Thuộc tính margin-block trong CSS dùng để canh khoảng cách giữa cạnh dưới và cạnh trên của phần tử HTML so với các phần tử HTML xung quanh 2 cạnh hoặc so với phần tử cha.
Cú pháp của Thuộc tính margin-block trong CSS
margin-block: giatri;
giatri: Giá trị để canh khoảng cách giữa cạnh dưới và cạnh trên của phần tử HTML so với các phần tử HTML xung quanh 2 cạnh hoặc so với phần tử cha (Ví dụ: 0px, 5px, 5%,....)
Ví dụ: margin-block:5px;
margin-block: giatri1 giatri2;
giatri1: Giá trị để canh khoảng cách giữa cạnh trên của phần tử HTML so với các phần tử HTML xung quanh cạnh trên hoặc so với phần tử cha (Ví dụ: 0px, 5px, 5%,....)
giatri2: Giá trị để canh khoảng cách giữa cạnh dưới của phần tử HTML so với các phần tử HTML xung quanh cạnh dưới hoặc so với phần tử cha (Ví dụ: 0px, 5px, 5%,....)
Ví dụ: margin-block:5px 20px;
Code Thuộc tính margin-block trong CSS
margin-block:5px; (Cách cạnh trên cạnh dưới 5px)
margin-block:5px 20px; (Cách cạnh trên 5px, cách cạnh dưới 20px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-block trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div.divcha {width:100%; float:left; height:auto; margin-top:10px; border:1px solid red}
div.divdon{border:1px solid blue; width:100%; float:left; height:auto;}
p {background:green;margin:0px;padding:0px;color:#fff}
div.divdon p{background:red}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-block trong CSS</h1>
<span>Dùng để canh khoảng cách giữa cạnh dưới và cạnh trên của phần tử HTML so với các phần tử HTML xung quanh 2 cạnh hoặc so với phần tử cha:</span>
<div class="divcha"><p style="margin-block:5px" >margin-block:5px (Cách cạnh trên cạnh dưới 5px)</p></div>
<div class="divcha"><p style="margin-block:5px 20px" >margin-block:5px 20px (Cách cạnh trên 5px, cách cạnh dưới 20px)</p></div>
<div class="divcha"><p style="margin-block:0px 20px" >margin-block:0px 20px(Cách cạnh trên 0px, cách cạnh dưới 20px)</p></div>
<div class="divdon" style="margin-block:0px 20px"><p >margin-block:0px 20px(Cách cạnh trên 0px, cách cạnh dưới 20px)</p></div>
<div class="divdon" style="margin-block:0px"><p >margin-block:0px(Cách cạnh trên 0px, cách cạnh dưới 0px, trước đó div trên có 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-block 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 *
