Web Cơ Bản

Cách thiết lập vùng đệm cho một phần tử HTML

1) Vùng đệm là gì !?

- Trong Bài 06 thì tôi đã có giới thiệu sơ qua cho các bạn biết vùng đệm là gì rồi !

- Vùng đệm (padding) là khoảng cách nằm giữa đường viền của phần tử & nội dung của phần tử.

2) Cách thiết lập vùng đệm cho phần tử

- Để thiết lập vùng đệm cho một phần tử HTML thì chúng ta cần phải thiết lập thuộc tính padding cho phần tử đó với cú pháp như sau:

padding: value;

- Trong đó, value là khoảng cách vùng đệm từ đường viền đến nội dung của phần tử, nó có thể được xác định dựa theo một trong ba loại giá trị:

length

- Chỉ định khoảng cách vùng đệm dựa theo một giá trị cụ thể, giá trị này có thể được xác định dựa theo các loại đơn vị như: px, em, cm, . . . .

 Xem ví dụ
%

- Chỉ định khoảng cách vùng đệm dựa theo tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó.

- Ví dụ: Chúng ta có phần tử A là cha của phần tử B, chiều rộng phần nội dung của phần tử A là 200px.

  • Nếu ta thiết lập thuộc tính padding cho phần tử B với giá trị 50% thì vùng đệm của phần tử B sẽ có khoảng cách là 100px.
  • Nếu ta thiết lập thuộc tính padding cho phần tử B với giá trị 20% thì vùng đệm của phần tử B sẽ có khoảng cách là 40px.
  • . . . .
 Xem ví dụ
inherit

- Kế thừa giá trị thuộc tính padding từ phần tử cha của nó.

 Xem ví dụ

3) Cách thiết lập vùng đệm ở riêng từng phía

- Sau khi tìm hiểu xong phần hướng dẫn ở trên thì chắc các bạn cũng đã thấy: "khi chúng ta thiết lập thuộc tính padding cho một phần tử HTML thì mặc định vùng đệm nằm ở cả bốn phía của phần tử sẽ có chung một khoảng cách"

- Tuy nhiên, không phải lúc nào chúng ta cũng muốn như thế, mà đôi khi lại muốn vùng đệm ở mỗi phía của phần tử sẽ có một khoảng cách khác nhau, điển hình như phần tử bên phải có:

  • Vùng đệm phía trên là 50 pixel.
  • Vùng đệm bên phải là 80 pixel.
  • Vùng đệm phía dưới là 250 pixel.
  • Vùng đệm bên trái là 25 pixel.

- Và để làm được điều đó thì chúng ta có hai cách cơ bản như sau:

  • Cách 1: Thiết lập nhiều giá trị cho thuộc tính padding.
  • Cách 2: Thêm "tên vị trí" vào phía sau thuộc tính padding.
LẬP TRÌNH WEB

- Tuy nhiên, trước khi đi vào tìm hiểu chi tiết hai cách trên thì các bạn cần phải nắm rõ tên từng vị trí của vùng đệm (bên dưới là ảnh minh họa từng vị trí của vùng đệm & tên của chúng)

top
bottom
left
right

3.1) Thiết lập nhiều giá trị cho thuộc tính padding

Cú pháp 1:
padding: value1 value2 value3 value4;

- Vùng đệm phía trên (top) sẽ có khoảng cách là value1.

- Vùng đệm bên phải (right) sẽ có khoảng cách là value2.

- Vùng đệm phía dưới (bottom) sẽ có khoảng cách là value3.

- Vùng đệm bên trái (left) sẽ có khoảng cách là value4.

Xem ví dụ
Cú pháp 2:
padding: value1 value2 value3;

- Vùng đệm phía trên (top) sẽ có khoảng cách là value1.

- Vùng đệm bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.

- Vùng đệm phía dưới (bottom) sẽ có khoảng cách là value3.

Xem ví dụ
Cú pháp 3:
padding: value1 value2;

- Vùng đệm phía trên (top) & phía dưới (bottom) sẽ có khoảng cách là value1.

- Vùng đệm bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.

Xem ví dụ

3.2) Thêm "tên vị trí" vào phía sau thuộc tính padding

- Để thiết lập vùng đệm ở riêng từng phía cho phần tử bằng cách thêm tên vị trí vào phía sau thuộc tính padding thì chúng ta sử dụng cú pháp như sau:

padding-tênvịtrí: value;
Ví dụ:
<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        div{
           display:inline-block;
           border:5px solid green;
           padding-top:25px;
           padding-right:300px;
           padding-bottom:100px;
           padding-left:50px;
        }
    </style>
</head>
<body>
    <div>LẬP TRÌNH WEB</div>
    <p>- Vùng đệm phía trên là 25 pixel</p>
    <p>- Vùng đệm bên phải là 300 pixel</p>
    <p>- Vùng đệm phía dưới là 100 pixel</p>
    <p>- Vùng đệm bên trái là 50 pixel</p>
</body>
</html>
Xem ví dụ