HTML/CSS | Thuộc tính padding

Học HTML, CSS từ Zero Tới Hero

• Vị trí trong Box Model
• Cú pháp sử dụng
• Trường hợp sử dụng

Tài nguyên sử dụng trong bài học:

• Dự án TRƯỚC khi thêm padding (link dự phòng)
• Dự án SAU khi thêm padding (link dự phòng)

Vị trí trong Box Model

Padding là phần không gian được đệm vào xung quanh nội dung của phần tử giúp phần tử đó trở nên dày hơn. Trong Box Model, padding nằm ở vị trí thứ 2 tính từ trong ra ngoài, nằm giữa content và border của phần tử.

Cú pháp sử dụng

Cú pháp:

.btn {
 padding: 15px;
}

Thuộc tính padding là cú pháp viết tắt của:

• padding-top: khoảng đệm bên trên
• padding-right: khoảng đệm bên phải
• padding-bottom: khoảng đệm bên dưới
• padding-left: khoảng đệm bên trái

Thuộc tính này có thể có từ 1 tới 4 giá trị cùng một lúc. Có thể chỉ định giá trị cho 1 hoặc tất cả các hướng theo cách sau:

selector {
  padding: 10px; /* Đệm cả 4 hướng 10px */
  padding: 10px 20px; /* Đệm trên/dưới 10px, trái/phải 20px */
  padding: 10px 20px 30px; /* Đệm trên 10px, trái/phải 20px, dưới 30px */
  padding: 10px 20px 30px 40px; /* Đệm theo thứ tự: trên-phải-dưới-trái */
}

Trường hợp sử dụng

Trong CSS, thuộc tính padding được sử dụng để điều chỉnh khoảng cách giữa nội dung của phần tử và viền xung quanh giúp cải thiện khả năng đọc và thẩm mỹ của giao diện web.

Cùng xem một bài nội dung được hiển thị khi chưa có padding:

Có thể thấy nội dung bên trên bị dính sát lề, chưa có sự căn chỉnh làm khó đọc và chưa đảm bảo về tính thẩm mỹ.

Sau khi sử dụng thuộc tính padding để căn chỉnh, nội dung được trình bày giúp dễ đọc hơn, đảm bảo thẩm mỹ hơn.

Nút bấm thiếu padding trông sẽ như nào?

<style>
.btn {
  display: inline-block;
  margin-top: 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background-color: #5ebbff;
}

</style>

<a class="btn" href="#!"> Đăng ký ngay</a>

Đăng ký ngay

Sau khi sử dụng padding để căn chỉnh trông nó sẽ:

<style>
.btn {
  display: inline-block;
  padding: 8px 20px; 
  margin-top: 20px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  background-color: #5ebbff;
}

</style>

<a class="btn" href="#!"> Đăng ký ngay</a>

Đăng ký ngay

Qua đó có thể thấy padding góp phần quan trọng trong việc căn chỉnh nội dung, bố cục các thành phần trên trang web giúp trang web trở nên đẹp hơn, sinh động hơn.

Lưu ý: Khi một phần tử được chỉ định width và height, sử dụng thêm padding sẽ làm tăng kích thước thực của phần tử đó.

Ví dụ:

Kích thước thực của hình vuông bên trên là 200x200. Sau khi thêm padding, kích thước thực của hình vuông lúc này là 240x240. Sở dĩ kích thước thực của phần tử thay đổi là vì padding tham gia làm tăng kích thước phần tử.

Nếu muốn kích thước thực của phần tử KHÔNG bị thay đổi sau khi thêm thuộc tính padding, bạn cần thêm đoạn code sau vào file CSS:

* { 
     box-sizing: border-box 
  }; 

Khi đó, nếu bạn thêm padding vào trình duyệt sẽ tự tính toán để đảm bảo kích thước thực vẫn giữ được đúng bằng kích thước gốc như ban đầu.

Tóm tắt

• Padding là phần không gian được đệm vào xung quanh nội dung của phần tử.
• Trong Box Model, padding nằm ở vị trí thứ 2 tính từ trong ra ngoài, nằm giữa content và border.
• Thuộc tính padding là cú pháp viết tắt của: padding-top, padding-bottom, padding-left, padding-right.
• Thuộc tính padding có thể có từ 1 tới 4 giá trị cùng lúc.
• Padding làm tăng kích thước thực của phần tử.