Khoảng đệm

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

Trong CSS, padding là khoảng trống giữa nội dung của một phần tử và đường viền của nó. Padding giúp tạo khoảng trống dễ nhìn quanh nội dung, giúp nội dung dễ đọc và trông bắt mắt hơn. Bạn có thể điều chỉnh padding riêng cho cả bốn phía của một phần tử (trên, phải, dưới và trái) hoặc dùng cách viết tắt.

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

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

padding-top: Khoảng đệm ở cạnh trên của phần tử.
padding-right: Khoảng đệm ở cạnh phải của phần tử.
padding-bottom: Khoảng đệm ở cạnh dưới của phần tử.

padding-left: Khoảng đệm ở bên trái của phần tử.
value: Giá trị khoảng đệm mong muốn, có thể được chỉ định bằng pixel (px), 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 cách viết tắt để đặt khoảng đệm cho cả bốn cạnh cùng lúc, ví dụ:

p {
    padding: 20px; /* Áp dụng cùng một khoảng đệm cho cả bốn cạnh */
}

div {
    padding: 10px 25px; /* Đặt khoảng đệm trên và dưới là 10px, bên trái và bên phải là 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Đặt khoảng đệm riêng cho từng cạnh */
}

Trong ví dụ này, tất cả phần tử <p> (đoạn văn) có khoảng đệm 20px ở cả bốn phía, tất cả phần tử <div> có khoảng đệm trên và dưới là 10px, khoảng đệm trái và phải là 25px, còn tất cả phần tử có lớp button có khoảng đệm trên là 15px, bên phải là 30px, bên dưới là 10px và bên trái là 5px.

Thử thách

Dễ

Bạn có một tài liệu HTML với hai tiêu đề. Nhiệm vụ của bạn là dùng thuộc tính padding để thêm khoảng cách xung quanh nội dung của các phần tử này. Hãy làm theo các bước dưới đây:

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

Tự làm thử

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>