Thuộc tính margin-left trong CSS
Bùi Tấn Lực - 1465
- 07/10/2025
Chức năng của Thuộc tính margin-left trong CSS
Thuộc tính margin-left trong CSS dùng để canh khoảng cách cạnh trái của phần tử HTML so với các phần tử HTML ở bên trái nó hoặc so với phần tử HTML chứa nó.
Cú pháp của Thuộc tính margin-left trong CSS
margin-left: giatri;
giatri: Giá trị để canh khoảng cách cạnh trái của phần tử HTML so với các phần tử HTML ở bên trái nó hoặc so với phần tử HTML chứa nó (Ví dụ: 0px, 20px,10%,....)
Code Thuộc tính margin-left trong CSS
margin-left: 20px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 20px)
margin-left: 0px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)
margin-left: 5%; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 5%)
margin-left: -5px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha -5px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-left 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-left trong CSS</h1>
<span>Canh khoảng cách cạnh trái của phần tử HTML so với các phần tử HTML ở bên trái nó hoặc so với phần tử HTML chứa nó:</span>
<div><p style="margin-left: 20px" >margin-left: 20px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 20px)</p></div>
<div><p style="margin-left: 5%" >margin-left: 5%; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 5%)</p></div>
<div><p style="margin-left: 0px" >margin-left: 0px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)</p></div>
<div><p style="margin-left: 0" >margin-left: 0; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)</p></div>
<div><p style="margin-left: auto" >margin-left: auto; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)</p></div>
<div><p style="margin-left: revert" >margin-left: revert</p></div>
<div style="margin-left: 20px;width:30%" >margin-left: 20px</div>
<div style="margin-left: 20px;width:30%" >margin-left: 20px</div>
<div><p style="margin-left: -5px" >margin-left: -5px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha -5px)</p></div>
</body>
</html>
Những trường hợp thường gặp khi sử dụng margin-left trong CSS
Trong thực tế, margin-left không chỉ được dùng để tạo khoảng cách bên trái cho một phần tử. Tùy giá trị và cách bố trí bố cục, thuộc tính này còn có thể hỗ trợ đẩy phần tử theo hướng ngang, tạo khoảng cách linh hoạt hoặc phối hợp với Flexbox, Grid.
margin-left với giá trị âm
Giá trị âm cho phép phần tử dịch chuyển về phía bên trái thay vì tạo thêm khoảng trống. Cách này hữu ích khi cần điều chỉnh vị trí của một phần tử mà không muốn thay đổi cấu trúc HTML.
.box {
margin-left: -20px;
}
Trong ví dụ trên, phần tử .box được kéo sang trái 20px so với vị trí thông thường. Tuy nhiên, không nên lạm dụng giá trị âm để sửa lỗi bố cục vì có thể khiến phần tử chồng lên nội dung khác hoặc khó kiểm soát khi giao diện thay đổi kích thước.
margin-left: auto hoạt động như thế nào?
Khi sử dụng margin-left: auto trong một bố cục phù hợp, phần khoảng trống còn lại ở phía bên trái có thể được dồn vào margin, từ đó đẩy phần tử về phía bên phải.
.button {
margin-left: auto;
}
Cách này thường phát huy hiệu quả trong Flexbox, chẳng hạn khi muốn đẩy nút hoặc một nhóm phần tử về cuối hàng mà không cần xác định khoảng cách cố định bằng pixel.
margin-left trong Flexbox và Grid
Trong Flexbox, margin-left có thể kết hợp với giá trị auto để phân bổ khoảng trống và điều chỉnh vị trí phần tử theo chiều ngang. Đây là cách đơn giản để tạo các bố cục như logo nằm bên trái, còn nút điều hướng nằm bên phải.
Với CSS Grid, margin-left chủ yếu được dùng để tạo khoảng cách hoặc tinh chỉnh vị trí của một phần tử bên trong vùng lưới. Tuy nhiên, nếu mục tiêu là thay đổi cấu trúc hàng và cột, nên ưu tiên các thuộc tính của Grid thay vì dùng margin để bù vị trí.
Khi nào nên dùng margin-left thay cho padding-left?
margin-left tạo khoảng cách ở bên ngoài phần tử, còn padding-left tạo khoảng trống giữa nội dung và cạnh bên trong của chính phần tử. Vì vậy, hãy chọn thuộc tính dựa trên vị trí của khoảng cách cần tạo.
.box {
margin-left: 20px;
}
.content {
padding-left: 20px;
}
Trong trường hợp cần đẩy cả khối sang phải so với phần tử xung quanh, margin-left thường phù hợp hơn. Ngược lại, nếu muốn nội dung bên trong không áp sát mép trái của khối, padding-left là lựa chọn hợp lý.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-left 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 *
