Canh lề cho phần tử bằng thuộc tính margin trong CSS, khoảng cách lề, vùng đệm ngoài

Canh lề cho phần tử bằng thuộc tính margin trong CSS, khoảng cách lề, vùng đệm ngoài

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 (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;
}

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;
}

Canh lề cho phần tử bằng thuộc tính margin trong CSS

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi