CSS Padding

Padding được sử dụng để tạo ra khoảng trống xung quanh nội dung của một phần tử HTML, khoảng trống này nằm ở bên trong của bất kỳ đường viền nào đã được định nghĩa.

CSS Padding

Các thuộc tính CSS padding được sử dụng để tạo ra khoảng trống xung quanh nội dung của một phần tử HTML, khoảng trống này nằm ở bên trong của bất kỳ đường viền nào đã được định nghĩa.

Với CSS, chúng ta có toàn quyền kiểm soát padding. Với CSS chúng ta có các thuộc tính để thiết lập padding cho mỗi cạnh của một phần tử (cạnh trên, cạnh phải, cạnh dưới, và cạnh trái).

Padding - Các cạnh riêng rẽ

CSS có các thuộc tính để chỉ định padding cho mỗi cạnh của một phần tử:

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

Tất cả các thuộc tính padding đều có thể có các giá trị sau:

• length - chỉ định một padding bằng đơn vị px, pt, cm,...
• % - chỉ định một padding bằng % của chiều rộng của phần tử chứa.
• inherit - chỉ định rằng padding sẽ được kế thừa từ phần tử cha

Ghi chú: Các giá trị âm không được cho phép.

Ví dụ sau sẽ thiết lập các padding khác nhau cho cả bốn cạnh của một phần tử <div>: 

div {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;

} 

Padding - Shorthand Property

Để rút ngắn code, chúng ta có thể chỉ định tất cả các thuộc tính padding trong một thuộc tính duy nhất.

Thuộc tính padding là một shorthand property cho các thuộc tính padding riêng rẽ sau:

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left

Sau đây là cách mà nó làm việc:

Nếu như thuộc tính padding có bốn giá trị:

padding: 25px 50px 75px 100px;

1. padding trên là 25px.
2. padding bên phải là 50px.
3. padding dưới là 75px.
4. padding bên trái là 100px.

Ví dụ sau sẽ sử dụng padding shorthand property với bốn giá trị:

div {
    padding: 25px 50px 75px 100px;
}

Nếu như thuộc tính padding có ba giá trị:

padding: 25px 50px 75px;

1. padding trên là 25px.
2. padding bên phải và padding bên trái là 50px.
3. padding dưới là 75px.

Ví dụ sau sẽ sử dụng padding shorthand property với ba giá trị: 

div {
    padding: 25px 50px 75px;
}

Nếu như thuộc tính padding có hai giá trị:

padding: 25px 50px;

1. padding trên và padding dưới là 25px.
2. padding bên phải và padding bên trái là 50px.

Ví dụ sau sẽ sử dụng padding shorthand property với hai giá trị: 

div {
    padding: 25px 50px;
}

Nếu như thuộc tính padding có một giá trị:

padding: 25px;

• Cả bốn padding đều là 25px.

Ví dụ sau sẽ sử dụng padding shorthand property với một giá trị: 

div {
    padding: 25px;
}

Padding và chiều rộng của phần tử 

Thuộc tính CSS width được sử dụng để chỉ định chiều rộng của vùng nội dung của phần tử HTML. Vùng nội dung là phần chia bên trong padding, border, và margin của một phần tử HTML (theo mô hình hộp).

Vì vậy, nếu như một phần tử có một chiều rộng cụ thể, padding được thêm vào phần tử đó sẽ được thêm vào tổng chiều rộng của phần tử. Điều này thường là một kết quả không mong muốn.

Trong ví dụ sau, phần tử <div> đã cho có chiều rộng là 300px. Tuy nhiên, chiều rộng thực sự của phần tử <div> sẽ là 350px (300px + 25px của padding bên trái + 25px của padding bên phải):

div {
    width: 300px;
    padding: 25px;
}

Để giữ cho chiều rộng ở mức 300px, bất kể số lượng padding là bao nhiêu, bạn có thể sử dụng thuộc tính box-sizing. Thuộc tính box-sizing này là nguyên nhân mà phần tử duy trì chiều rộng thực sự của nó; nếu như bạn tăng thêm padding, không gian khả dụng của nội dung sẽ giảm bớt.

Ví dụ sau sẽ sử dụng thuộc tính box-sizing để giữ cho chiều rộng ở mức 300px, bất kể số lượng padding là bao nhiêu:

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

Tất cả các thuộc tính CSS Padding

1. padding: Một shorthand property để thiết lập tất cả các thuộc tính padding trong một khai báo duy nhất.
2. padding-bottom: Thiết lập padding dưới của một phần tử.
3. padding-left: Thiết lập padding bên trái của một phần tử.
4. padding-right: Thiết lập padding bên phải của một phần tử.
5. padding-top: Thiết lập padding trên của một phần tử.