Thuộc tính padding trong CSS

Trong bài học CSS trước bạn đọc đã cùng Taimienphi.vn tìm hiểu các thuộc tính định dạng danh sách (list) trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn thuộc tính padding trong CSS.

Thuộc tính padding trong CSS được sử dụng để tạo khoảng trống giữa nội dung hiển thị của một phần tử với đường viền của nó. Tham khảo tiếp bài học CSS dưới đây của Taimienphi.vn để tìm hiểu các thuộc tính padding trong CSS.

thuoc tinh padding trong css

Thuộc tính padding trong CSS

Mục Lục bài viết:
1. Các thuộc tính padding trong CSS
1.1. Thuộc tính padding rút gọn
1.2. Thuộc tính width
1.3. Thuộc tính padding trong CSS

1. Các thuộc tính padding trong CSS

CSS bao gồm các thuộc tính để chỉ định padding cho từng phần không gian của phần tử:

- Thuộc tính padding-top.

- Thuộc tính padding-right.

- Thuộc tính padding-bottom.

- Thuộc tính padding-left.

Tất cả các thuộc tính padding có thể bao gồm các giá trị dưới đây:

- length: chỉ định giá trị padding dưới dạng đơn vị px, pt, cm, ... .

- %: chỉ định giá trị padding dưới dạng % chiều rộng của phần tử chứa.

- inherit: chỉ định giá trị padding được kế thừa từ phần tử cha.

Lưu ý: Các thuộc tính padding không nhận giá trị âm.

Ví dụ:

thuoc tinh padding trong css

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh padding trong css 2

1.1 Thuộc tính padding rút gọn

Để rút gọn mã, chúng ta có thể chỉ định tất cả các thuộc tính padding trong một khai báo.

Sử dụng thuộc tính padding để khai báo tất cả các thuộc tính dưới đây trong một khai báo:

- Thuộc tính padding-top.

- Thuộc tính padding-right.

- Thuộc tính padding-bottom.

- Thuộc tính padding-left.

Trong đó:

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

padding: 25px 50px 75px 100px;

Padding bên trên là 25px

Padding bên phải là 50px

Padding bên dưới là 75px

Padding bên trái là 100px

Ví dụ 1:

thuoc tinh padding trong css 3

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh padding trong css 4

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

padding: 25px 50px 75px;

Padding bên trên là 25px

Padding bên phải và trái là 50px

Padding bên dưới là 75px

Ví dụ 2:

thuoc tinh padding trong css 5

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh padding trong css 6

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

padding: 25px 50px;

Padding bên trên và dưới là 25px

Padding bên phải và trái là 50px

Ví dụ 3:

thuoc tinh padding trong css 7

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh padding trong css 8

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

padding: 25px;

Tất cả các padding là 25px

Ví dụ 4:

thuoc tinh padding trong css 9

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh padding trong css 10

1.2 Thuộc tính width

Thuộc tính width trong CSS xác đị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 padding, đường viền và lề của phần tử (gọi là Box Model - định dạng khung, hộp bao quanh một phần tử).

Vì vậy nếu chiều rộng phần tử đã được chỉ định, khi chúng ta thêm padding vào phần tử đó, nó sẽ được tính vào tổng chiều rộng của phần tử.

Ví dụ 1:

thuoc tinh padding trong css 11

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh padding trong css 12

Trong ví dụ này phần tử div có chiều rộng được chỉ định là 30px. Tuy nhiên thực tế chiều rộng của phần tử div là 350px (300px + 25px padding bên trái + 25px padding bên phải).

Để giữ nguyên chiều rộng phần tử div là 300px ngay cả khi thêm padding, chúng ta sử dụng thuộc tính box-sizing.

Ví dụ 2:

thuoc tinh padding trong css 13

Kết quả đầu ra có dạng như dưới đây:

thuoc tinh padding trong css 14

1.3 Thuộc tính padding trong CSS

Dưới đây là bảng danh sách tất cả các thuộc tính padding trong CSS:

thuoc tinh padding trong css 15

https://thuthuat.taimienphi.vn/thuoc-tinh-padding-trong-css-50601n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn các thuộc tính padding trong CSS. Ngoài ra bạn đọc có thể tham khảo thêm một số bài học CSS khác đã có trên Taimienphi.vn để tìm hiểu thêm thuộc tính margin trong CSS là gì nhé.

Tác giả: Duy Tâm     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Thuộc tính tùy chỉnh kích thước trong CSS
Thuộc tính background trong CSS
Thuộc tính Text trong CSS
Thuộc tính Font trong CSS
Hình ảnh (image) trong CSS
Từ khoá liên quan:

Thuộc tính padding trong CSS

, padding trong CSS, học CSS,

SOFT LIÊN QUAN
  • Rapid CSS

    Chỉnh sửa mã nguồn CSS

    Rapid CSS là một trình soạn thảo nâng cao có thể giúp bạn dễ dàng tạo và sửa tập tin định dạng CSS với bất kỳ kích thước và độ phức tạp cao với rất nhiều chức năng trợ giúp như tự động hoàn thành, khảo sát mã và kiểm tra ...

Tin Mới

  • Scrollbar trong CSS, có ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn các thuộc tính tùy chỉnh kích thước trong CSS, bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn Scrollbar trong CSS nhé.

  • Thuộc tính tùy chỉnh kích thước trong CSS

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn thuộc tính Outline trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn các thuộc tính tùy chỉnh kích thước trong CSS nhé.

  • Thuộc tính Margin trong CSS

    Bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính border trong CSS, trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về các thuộc tính Margin trong CSS.

  • Cách đổi mật khẩu modem wifi Tplink

    Việc đổi mật khẩu wifi TPlink giúp bạn bảo vệ mạng của mình tốt hơn. Để tránh người ngoài đăng nhập và làm giảm băng thông mạng Internet của bạn. Ở bài viết sau đây Taimienphi.vn sẽ hướng dẫn các bạn cách đổi mật khẩu modem wifi TP-Link đơn giản, hiệu quả.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá