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ụ
0