Thuộc tính padding-bottom trong CSS
Bùi Tấn Lực - 864
- 08/10/2025
Chức năng của Thuộc tính padding-bottom trong CSS
Thuộc tính padding-bottom trong CSS dùng để quy định khoảng cách giữa cạnh dưới của một thẻ HTML với các phần tử con nằm trong thẻ đó, bạn có thể dùng đơn vị px, em, % để quy định khoảng cách.
Cú pháp của Thuộc tính padding-bottom trong CSS
padding-bottom: giatri;
giatri: Giá trị để quy định khoảng cách giữa cạnh dưới của một thẻ HTML với các phần tử con nằm trong thẻ đó (Ví dụ: 10px, 10%, 2em,....)
Code Thuộc tính padding-bottom trong CSS
padding-bottom:10px; Cạnh dưới cách các phần tử con 10px
padding-bottom:0px; Cạnh dưới cách các phần tử con 0px
padding-bottom:10%; Cạnh dưới cách các phần tử con 10%
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính padding-bottom trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; margin-bottom:10px; border:1px solid red}
p {background:green; width:100%; float:left; margin:0px; padding:25px;color:#fff}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính padding-bottom trong CSS</h1>
<span>Quy định khoảng cách giữa cạnh dưới của một thẻ HTML với các phần tử con nằm trong thẻ đó, bạn có thể dùng đơn vị px, em, % để quy định khoảng cách:</span>
<div style="padding-bottom:10px"><p>padding-bottom:10px; Cạnh dưới cách các phần tử con 10px</p></div>
<div style="padding-bottom:10%"><p>padding-bottom:10%; Cạnh dưới cách các phần tử con 10%</p></div>
<div style="padding-bottom:2em"><p>padding-bottom:2em; Cạnh dưới cách các phần tử con 2em</p></div>
<div style="padding-bottom:0"><p>padding-bottom:0; Cạnh dưới cách các phần tử con 0px</p></div>
<div style="padding-bottom:0px"><p>padding-bottom:0px; Cạnh dưới cách các phần tử con 0px</p></div>
</body>
</html>
Cách sử dụng padding-bottom trong CSS hiệu quả
Không chỉ dùng để tạo khoảng trống đơn thuần, padding-bottom còn giúp kiểm soát bố cục bên trong phần tử một cách linh hoạt. Khi sử dụng đúng cách, thuộc tính này giúp nội dung có khoảng thở hợp lý mà không làm thay đổi khoảng cách giữa các phần tử bên ngoài.
Điều chỉnh khoảng cách nội dung với cạnh dưới phần tử
padding-bottom tạo khoảng cách giữa nội dung và cạnh dưới của phần tử. Cách này phù hợp khi muốn phần nền hoặc đường viền của phần tử vẫn bao phủ cả vùng khoảng cách được tạo ra.
Ví dụ, có thể tạo thêm khoảng trống phía dưới cho một đoạn nội dung:
.content {
padding-bottom: 24px;
}
Khoảng cách này nằm bên trong phần tử, vì vậy nội dung bên ngoài không bị đẩy ra xa như khi sử dụng margin-bottom. Đây là điểm cần lưu ý khi xây dựng các khối nội dung, thẻ thông tin hoặc khu vực có nền màu riêng.
Kết hợp padding-bottom với box-sizing
Khi phần tử được thiết lập kích thước cố định, padding-bottom có thể ảnh hưởng đến kích thước hiển thị tùy theo giá trị của box-sizing. Việc hiểu mối quan hệ này giúp hạn chế tình trạng phần tử cao hơn dự kiến.
Với box-sizing: border-box, phần padding được tính vào kích thước đã khai báo của phần tử. Đây thường là lựa chọn thuận tiện khi cần kiểm soát kích thước tổng thể của các khối trong bố cục.
.box {
box-sizing: border-box;
height: 200px;
padding-bottom: 30px;
}
Nhờ vậy, chiều cao tổng thể của .box vẫn được kiểm soát theo giá trị đã đặt, thay vì cộng thêm phần padding vào kích thước ngoài.
Khi nào nên dùng padding-bottom thay cho margin-bottom?
Nên dùng padding-bottom khi khoảng trống cần nằm bên trong phần tử, chẳng hạn tạo khoảng cách giữa nội dung với đường viền hoặc mép dưới của một khối có nền.
Ngược lại, margin-bottom phù hợp khi muốn tạo khoảng cách giữa phần tử hiện tại và phần tử kế tiếp. Phân biệt được hai trường hợp này sẽ giúp bố cục dễ kiểm soát hơn và tránh việc phải dùng nhiều giá trị khoảng cách để sửa lỗi giao diện.
Một cách ghi nhớ đơn giản là: padding-bottom tạo khoảng trống bên trong, còn margin-bottom tạo khoảng cách bên ngoài. Chọn đúng thuộc tính ngay từ đầu sẽ giúp CSS rõ ràng và hạn chế phát sinh lỗi khi bố cục thay đổi.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính padding-bottom trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
