Embedded Files
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ụ:
h1{
margin-top:20px;
margin-right:40px;
margin-bottom:80px;
margin-left:160px;
}
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;
width:300px;
margin-left:auto;
}
.div4{
border:1px solid green;
width: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>
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;
}
Google Sites
Report abuse