18/08/2018, 10:53
Canh lề cho phần tử bằng thuộc tính margin trong CSS
Thuộc tính margin dùng để canh lề cho phần tử. Dưới đây là một số thuộc tính margin: margin-top (canh lề phía trên) margin-right (canh lề bên phải) margin-bottom (canh lề phía dưới) margin-left (canh lề bên trái) Ví dụ minh họa: Phần tử này có: Khoảng cách lề phía trên ...
Thuộc tính margin dùng để canh lề cho phần tử.
Dưới đây là một số thuộc tính margin:
- margin-top (canh lề phía trên)
- margin-right (canh lề bên phải)
- margin-bottom (canh lề phía dưới)
- margin-left (canh lề bên trái)
Ví dụ minh họa:
Phần tử này có:
- Khoảng cách lề phía trên (margin-top) là 0px;
- Khoảng cách lề bên phải (margin-right) là 200px;
- Khoảng cách lề phía dưới (margin-bottom) là 50px;
- Khoảng cách lề bên trái (margin-left) là 100px;
Ví dụ
h1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
Xem ví dụ
Lưu ý: Giá trị của thuộc tính margin có thể xác định theo đơn vị: px, em, %, hoặc inherit (kế thừa giá trị của phần tử chứa nó), auto (trình duyệt tự động thiết lập giá trị)
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.div1{
border:1px solid black;
margin-top:20px;
margin-left:50px;
margin-bottom:30px;
margin-left:150px;
}
.div2{
border:3px solid red;
margin-left: inherit;
}
.div3{
border:1px solid blue;
awidth:300px;
margin-left:auto;
}
.div4{
border:1px solid green;
awidth:300px;
margin:auto;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">HƯỚNG DẪN HỌC LẬP TRÌNH WEB</div>
</div>
<hr>
<div class="div3">HƯỚNG DẪN THIẾT KẾ WEB</div>
<hr>
<div class="div4">WEB CƠ BẢN</div>
</body>
</html>
Xem ví dụ
Cú pháp canh lề rút gọn
Thay vì phải canh lề bởi bốn thuộc tính (margin-top, margin-right, margin-bottom, margin-left) riêng biệt, thì ta có thể gôm chúng lại thành một. Với cách này, ta có bốn cú pháp như sau:
margin: value;
- Cả bốn vị trí đều có cùng giá trị value
margin: value1 value2;
- margin-top & margin-bottom có giá trị value1
- margin-right & margin-left có giá trị value2
margin: value1 value2 value3;
- margin-top có giá trị value1
- margin-right & margin-left có giá trị value2
- margin-bottom có giá trị value3
margin: value1 value2 value3 value4;
- margin-top có giá trị value1
- margin-right có giá trị value2
- margin-bottom có giá trị value3
- margin-left có giá trị value4
Ví dụ
.div1{
margin:50px;
}
.div2{
margin:10px 100px;
}
.div3{
margin:10px 100px 50px;
}
.div4{
margin:20px 40px 80px 160px;
}
Xem ví dụ
