Leaderboard ads banner

CSS Vùng Đệm

Vùng Đệm CSS (Padding)

Các thuộc tính padding CSS được sử dụng để tạo vùng đệm giữa đường viền và nội dung của phần tử

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

Vùng Đệm Cho Mỗi Bên Của Phần Tử

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

  • padding-top (vùng đệm phía trên)
  • padding-right (vùng đệm bên phải)
  • padding-bottom(vùng đệm phía dưới)
  • padding-left(vùng đệm bên trái)

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

  • length - chỉ định một padding trong px, pt, cm, v.v.
  • % - chỉ định một phần đệm bằng % chiều rộng của phần tử chứa
  • kế thừa - xác định rằng phần đệm phải được thừa hưởng từ phần tử cha

Lưu ý: Ta không được phép sử dụng các giá trị âm

Ví dụ sau đặt các vùng đệm khác nhau cho tất cả bốn phía của phần tử <div>:

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

Mở editor

Cú pháp thiết lập vùng đệm rút gọn

Để rút gọn vùng đệm, bạn có thể chỉ định tất cả các thuộc tính padding trong một thuộc tính.

Thuộc tính padding là một thuộc tính được phép viết tắt cho các thuộc tính padding sau đây:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Vì vậy, đây là cách nó hoạt động:

Nếu thuộc tính padding có bốn giá trị:
padding: 25px 50px 75px 100px; Có nghĩa là :

  • Vùng đệm trên cùng là 25px
  • Vùng đệm bên phải là 50px
  • Vùng đệm dưới đáy là 75px
  • Vùng đệm bên trái là 100px

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

Padding: 25px 50px 75px; Có nghĩa là :

  • Vùng đệm trên cùng là 25px
  • Vùng đệm bên trái và bên phải là 50px
  • Vùng đệm dưới đáy là 75px

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

Padding: 25px 50px ; Có nghĩa là :

  • Vùng đệm trên cùng và dưới đáy là 25px
  • Vùng đệm bên trái và bên phải là 50px

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

Padding: 25px; Có nghĩa là :

  • Tất cả các vùng đệm đều là 25px

Ví dụ :
Mở editor

Chiều Rộng Vùng Đệm Và Phần Tử

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

Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm đượ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ử. Đây thường là một kết quả không mong muốn.

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

Ví dụ

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

Để giữ chiều rộng ở 300px, bất kể số lượng đệm, bạn có thể sử dụng thuộc tính box-sizing. Điều này sẽ giúp duy trì chiều rộng của nó; nếu bạn tăng vùng đệm, không gian nội dung có sẵn sẽ giảm. Đây là một ví dụ:

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

Để học tốt thì chúng ta phải kết hợp giữa việc học đi đôi với hành, hãy cùng nhau làm những bài tập thực hành đơn giản theo đường dẫn bên dưới nhé. Nó sẽ giúp chúng ta học tập tốt hơn nhiều đấy.

Nội dung không được để trống

Hướng Dẫn Liên Quan