🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ cho ace về Padding trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

1. Padding trong CSS là gì?

Các thuộc tính đệm(padding )CSS được sử dụng để tạo không gian xung quanh nội dung của phần tử, bên trong bất kỳ đường viền xác định nào.

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

2. Các cạnh riêng biệt của padding

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

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

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

  • length – chỉ định một khoảng đệm(padding) bằng px, pt, cm, v.v.
  • % – chỉ định một khoảng đệm(padding) tính bằng% chiều rộng của phần tử chứa
  • inherit – chỉ định rằng phần đệm phải được kế thừa từ phần tử cha

Lưu ý: Giá trị âm không được phép.

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>

Copy and chạy code

3. Cách viết gọn của padding

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

Thuộc tính padding là một thuộc tính viết tắt cho các thuộc tính padding riêng lẻ sau:

  • 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;
    • đệm trên cùng là 25px
    • đệm bên phải là 50px
    • đệm dưới cùng là 75px
    • đệm bên trái là 100px

Ví dụ: Sử dụng thuộc tính viết tắt padding với bốn giá trị:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 4 values</h2>

<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of 75px, and a left padding of 100px.</div>

</body>
</html>

Copy and chạy code

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

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

Ví dụ: Sử dụng thuộc tính viết tắt padding với ba giá trị:

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

Bạn có thể thay đoạn code này với đoạn code ví dụ đầy đủ ở trên để xem kết quả.

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

  • padding: 25px 50px;
    • đệm trên và dưới là 25px
    • đệm phải và trái là 50px

Ví dụ: 

div {
  padding: 25px 50px;
}

Bạn có thể thay đoạn code này với đoạn code ví dụ đầy đủ ở trên để xem kết quả.

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

  • padding: 25px;
    • tất cả bốn paddings là 25px

Ví dụ:

div {
  padding: 25px;
}

4. Phần đệm và chiều rộng của phần tử

Thuộc tính width CSS chỉ định chiều rộng của 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 một phần tử.

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.

Ví dụ: Ở đây, phần tử < div > có chiều rộng là 300px. Tuy nhiên, chiều rộng thực tế của phần tử < div > sẽ là 350px (300px + 25px đệm bên trái + 25px đệm phải):

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

Copy and chạy code

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

Ví dụ: Sử dụng thuộc tính box-sizing để giữ chiều rộng ở 300px, bất kể số lượng padding:

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

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM