Lề

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 35 trên 76.

Trong CSS, margin là khoảng trống xung quanh một phần tử, nằm bên ngoài mọi đường viền đã xác định. Đây là một phần thiết yếu khác của mô hình hộp. Lề giúp tạo khoảng cách giữa các phần tử, tách chúng khỏi nhau.

Bạn có thể điều chỉnh lề ở cả bốn phía của một phần tử (trên, phải, dưới và trái) riêng biệt hoặc dùng ký hiệu viết tắt.

Đây là cú pháp cơ bản để sử dụng thuộc tính margin:

selector {
    margin-top: value;
    margin-right: value;
    margin-bottom: value;
    margin-left: value;
}

margin-top: Lề phía trên của phần tử.
margin-right: Lề phía bên phải của phần tử.
margin-bottom: Lề phía dưới của phần tử.

margin-left: Lề ở bên trái của phần tử.
value: Giá trị lề mong muốn, có thể được chỉ định bằng pixel (px), đơn vị em (em), phần trăm (%) hoặc các đơn vị CSS hợp lệ khác.

Bạn cũng có thể dùng ký hiệu rút gọn để đặt lề cho cả bốn phía cùng lúc, ví dụ:

p {
    margin: 20px; /* Đặt cùng một khoảng cách lề cho cả bốn phía */
}

div {
    margin: 10px 25px; /* Đặt khoảng cách lề trên và dưới là 10px, lề trái và phải là 25px */
}

.button {
    margin: 15px 30px 10px 5px;/* Đặt khoảng cách lề riêng cho từng phía */
}

Trong ví dụ này, tất cả phần tử <p> có lề 20px ở cả bốn phía, tất cả phần tử <div> có lề trên và dưới là 10px, lề trái và phải là 25px, còn tất cả phần tử có lớp button có lề trên là 15px, lề phải là 30px, lề dưới là 10px và lề trái là 5px.

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có tiêu đề (<h1>) và một phần tử phân khu (<div>). Nhiệm vụ của bạn là dùng thuộc tính margin để thêm khoảng trống xung quanh các phần tử này. Làm theo các bước sau:

Viết một quy tắc CSS áp dụng cho phần tử <h1>. Đặt margin thành 20px ở tất cả các phía.
Viết một quy tắc CSS áp dụng cho phần tử <div>. Đặt margin phía trên và phía dưới thành 10px, phía trái và phía phải thành 30px.

Tự làm thử

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>