Padding trong CSS

Padding đượ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. Nó còn gọi là phần đệm trong CSS.

Ví dụ:

<div style="padding: 70px; border: 1px solid #8169ca;">Phần tử này có phần đệm 70px.Phần tử này có phần đệm 70px.Phần tử này có phần đệm 70px.Phần tử này có phần đệm 70px.Phần tử này có phần đệm 70px.Phần tử này có phần đệm 70px.</div>

Hiển thị trên trình duyệt:

Thuộc tính padding trong 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 đệm. Có các thuộc tính để thiết lập phần đệm cho mỗi bên của một phần tử bao gồm trên cùng, bên phải, dưới cùng và bên trái.

Giá trị Padding các mặt riêng lẻ

CSS có các thuộc tính để chỉ định phần đệm 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 bằng px, pt, cm…
• %: Chỉ định một khoảng đệm tính bằng % chiều rộng của phần tử chứa nó.
• inherit: Chỉ định rằng phần đệm phải được kế thừa từ phần tử mẹ.

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>:

<div style="padding-top: 70px; padding-right: 30px;  padding-bottom: 50px;  padding-left: 80px; border: 1px solid #8169ca;">Phần tử này có vùng đệm trên cùng là 70px, vùng đệm bên phải là 30px, vùng đệm bên dưới là 50px, vùng đệm bên trái là 80px. Phần tử này có vùng đệm trên cùng là 70px, vùng đệm bên phải là 30px, vùng đệm bên dưới là 50px, vùng đệm bên trái là 80px.</div>

Hiển thị trên trình duyệt:

Viết tắt của thuộc tính Padding

Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính đệm trong một thuộc tính. Viết tắt bằng padding sẽ bao gồm các giá trị của 4 thành phần trên, phải, dưới, trái sau đây:

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

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

Ví dụ: padding: 25px 10px 50px 20px; đồng nghĩa với các giá trị:

• padding-top:25px;
• padding-right:10px;
• padding-bottom:50px;
• padding-left: 20px;

Ví dụ:

<div style="padding:70px 30px 50px 80px; border: 1px solid #8169ca;">Phần tử này có vùng đệm trên cùng là 70px, vùng đệm bên phải là 30px, vùng đệm bên dưới là 50px, vùng đệm bên trái là 80px. Phần tử này có vùng đệm trên cùng là 70px, vùng đệm bên phải là 30px, vùng đệm bên dưới là 50px, vùng đệm bên trái là 80px.</div>

Hiển thị trên trình duyệt:

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

Ví dụ: padding: 5px 10px 15px; đồng nghĩa với các giá trị:

• padding-top:5px;
• padding-right:10px;
• padding-bottom:15px;

Ví dụ:

<div style="padding:5px 10px 15px; border: 2px dashed #000;">Phần tử này có vùng đệm trên cùng là 5px, vùng đệm bên phải là 10px, vùng đệm bên dưới là 15px. Phần tử này có vùng đệm trên cùng là 5px, vùng đệm bên phải là 10px, vùng đệm bên dưới là 15px.</div>

Hiển thị trên trình duyệt:

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

Ví dụ: padding: 5px 10px; đồng nghĩa với các giá trị:

• padding-top:5px; padding-bottom:5px;
• padding-right:10px;padding-left:10px;

Ví dụ:

<div style="padding: 15px 10px ; border: 2px dashed brown;">Phần tử này có phần đệm trên và dưới là 15px, bên trái và phải là 10px.</div>

Hiển thị trên trình duyệt:

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

Ví dụ: padding: 5px; đồng nghĩa với các giá trị:

• Tất cả 4 padding đều là 5px.

Ví dụ:

<div style="padding: 15px; border: 2px dashed brown;">Phần tử này có phần đệm 4 mặt là 15px.Phần tử này có phần đệm 4 mặt là 15px.Phần tử này có phần đệm 4 mặt là 15px.</div>

Hiển thị trên trình duyệt:

Phần đệm và chiều rộng phần tử

Thuộc tính width CSS 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 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 + padding-left: 25px  + padding-right: 25px:

<div style="width: 300px; padding: 25px; border: 2px dashed brown;">Chiều rộng của div này là 350px, mặc dù nó được định nghĩa là 300px trong CSS.</div>

Hiển thị trên trình duyệt:

So với <div> rộng 300px không có padding:

<div style="width: 300px; border: 2px dashed brown;">Chiều rộng của div này là 300px</div>

Kết quả:

Để giữ chiều rộng ở 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ụ:

<div style="width: 300px; padding: 25px;   box-sizing: border-box; border: 2px dashed brown;">Chiều rộng của div này là 300px</div>

Hiển thị trên trình duyệt:

Tổng kết thuộc tính padding CSS

---

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

---