Thuộc tính margin-right trong CSS
Bùi Tấn Lực - 864
- 07/10/2025
Chức năng của Thuộc tính margin-right trong CSS
Thuộc tính margin-right trong CSS dùng để canh khoảng cách cạnh phải của phần tử HTML so với các phần tử HTML ở bên phải nó hoặc so với phần tử HTML chứa nó.
Cú pháp của Thuộc tính margin-right trong CSS
margin-right: giatri;
giatri: Giá trị để canh khoảng cách cạnh phải của phần tử HTML so với các phần tử HTML ở bên phải nó hoặc so với phần tử HTML chứa nó (Ví dụ: 0px, 10px, 5%,....)
Code Thuộc tính margin-right trong CSS
margin-right: 20px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 20px)
margin-right: 0px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)
margin-right: 5%; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 5%)
margin-right: -5px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha -5px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-right 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}
p {background:green;margin:0px;padding:0px;color:#fff}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-right trong CSS</h1>
<span>Canh khoảng cách cạnh phải của phần tử HTML so với các phần tử HTML ở bên phải nó hoặc so với phần tử HTML chứa nó:</span>
<div><p style="margin-right: 20px" >margin-right: 20px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 20px)</p></div>
<div><p style="margin-right: 5%" >margin-right: 5%; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 5%)</p></div>
<div><p style="margin-right: 0px" >margin-right: 0px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)</p></div>
<div><p style="margin-right: 0" >margin-right: 0; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)</p></div>
<div><p style="margin-right: auto" >margin-right: auto; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)</p></div>
<div><p style="margin-right: revert" >margin-right: revert</p></div>
<div style="margin-right: 20px;width:30%" >margin-right: 20px</div>
<div style="margin-right: 20px;width:30%" >margin-right: 20px</div>
<div><p style="margin-right: -5px" >margin-right: -5px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha -5px)</p></div>
</body>
</html>
Cách sử dụng margin-right trong bố cục thực tế
margin-right phát huy hiệu quả rõ nhất khi cần tạo khoảng trống ở phía bên phải của một phần tử trong bố cục. Thay vì đặt khoảng cách cố định cho từng trường hợp, bạn có thể kết hợp thuộc tính này với cách tổ chức phần tử để giao diện dễ kiểm soát và thuận tiện khi thay đổi.
Tạo khoảng cách giữa các phần tử nằm cạnh nhau
Khi nhiều phần tử được đặt trên cùng một hàng, margin-right có thể tạo khoảng cách giữa chúng mà không làm thay đổi nội dung bên trong. Cách này thường được dùng cho các nút, mục menu, thẻ thông tin hoặc các khối nằm cạnh nhau.
.menu-item {
margin-right: 20px;
}
Nếu có nhiều phần tử liên tiếp, việc áp dụng cùng một khoảng cách cho tất cả phần tử có thể khiến phần tử cuối cùng xuất hiện một khoảng trống không cần thiết. Khi đó, nên xử lý riêng phần tử cuối.
Kết hợp margin-right với width để chia cột
Trong bố cục nhiều cột, width xác định độ rộng của cột còn margin-right tạo khoảng cách với cột kế bên. Tuy nhiên, cần tính tổng chiều rộng của các cột và khoảng cách để chúng không vượt quá chiều rộng của phần tử chứa.
.column {
width: 30%;
margin-right: 5%;
}
Với cách này, nếu có nhiều cột trên cùng một hàng, hãy kiểm tra tổng width và margin-right trước khi áp dụng. Khi tổng kích thước vượt quá không gian chứa, cột có thể bị đẩy xuống hàng mới.
Loại bỏ margin-right ở phần tử cuối cùng
Khi margin-right được dùng để tạo khoảng cách giữa các phần tử, phần tử cuối thường không cần khoảng trống ở bên phải. Có thể dùng pseudo-class last-child để loại bỏ phần khoảng cách này.
.menu-item {
margin-right: 20px;
}
.menu-item:last-child {
margin-right: 0;
}
Cách xử lý này giúp khoảng cách giữa các phần tử được duy trì đồng đều nhưng không tạo thêm khoảng trống thừa ở mép cuối của nhóm. Đây cũng là lựa chọn phù hợp khi số lượng phần tử có thể thay đổi mà không muốn phải sửa CSS thủ công.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-right 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 *
