Home → Là Gì

Tính chất padding được chấp nhận bạn xác định khoảng trống không gian gian giữa nội dung hiển thị của một thành phần với đường viền của nó.

Giá trị của tính chất padding có thể ở dạng chiều dài (đơn vị px, pt, cm, …) , dạng %, hoặc từ khóa inherit. Nếu giá trị của tính chất là inherit, thì thành phần sẽ thừa kế giá trị của tính chất padding này từ thành phần cha của nó. Nếu giá trị là dạng %, thì đó là tỉ lệ phần trăm với hộp chứa thành phần này.

Với CSS, bạn không những có thể xác định padding cho toàn bộ phần không gian xung quanh nội dung, mà còn tồn tại thể xác định padding cho từng phần không gian này, ví dụ như phần trên, phần dưới, cạnh trái hoặc cạnh phải. Trong tương lai là các tính chất trong CSS khiến cho bạn thực hiện việc này:

• Tính chất padding-bottom xác định phần padding phía dưới của một thành phần.

• Tính chất padding-top xác định phần padding phía trên của một thành phần.

• Tính chất padding-left xác định phần padding bên trái của một thành phần.

• Tính chất padding-right xác định phần padding bên phải của một thành phần.

• Tính chất padding khiến cho bạn xác định toàn bộ các tính chất trên, tức là có thể xác định toàn bộ phần không gian padding xung quanh một thành phần.

Tiếp theo tất cả chúng ta sẽ tìm hiểu rõ ràng và cụ thể cách sử dụng từng tính chất và giá trị của nó trong CSS.

Tính chất padding-bottom trong CSS

Để xác định phần padding phía dưới của nội dung hiển thị, chúng ta có thể sử dụng tính chất padding-bottom. Tính chất này còn có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Ví dụ sau minh họa cách sử dụng tính chất padding-bottom trong CSS:

<htmlvàgt; <headvàgt; </headvàgt; <bodyvàgt; <p style=”padding-bottom: 15px; border:1px solid black;”> Vi du doan van co Bottom Padding da duoc xac dinh bang gia tri px </pvàgt; <p style=”padding-bottom: 5%; border:1px solid black;”> Vi du doan van co Bottom Padding da duoc xac dinh bang gia tri percent </pvàgt; </bodyvàgt; </htmlvàgt;

Kết quả là:

Tính chất padding-top trong CSS

Để xác định phần padding phía trên của nội dung hiển thị, chúng ta có thể sử dụng tính chất padding-top. Tính chất này còn có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Ví dụ sau minh họa cách sử dụng tính chất padding-top trong CSS:

<htmlvàgt; <headvàgt; </headvàgt; <bodyvàgt; <p style=”padding-top: 15px; border:1px solid black;”> Vi du doan van co Top Padding da duoc xac dinh bang gia tri px </pvàgt; <p style=”padding-top: 5%; border:1px solid black;”> Vi du doan van co Top Padding da duoc xac dinh bang gia tri percent </pvàgt; </bodyvàgt; </htmlvàgt;

Kết quả là:

Tính chất padding-left trong CSS

Để xác định phần padding bên trái của nội dung hiển thị, chúng ta có thể sử dụng tính chất padding-left. Tính chất này còn có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Để xác định phần padding bên trái của nội dung hiển thị, chúng ta có thể sử dụng tính chất padding-left. Tính chất này còn có thể nhận giá trị dưới dạng chiều dài hoặc dạng %.

<htmlvàgt; <headvàgt; </headvàgt; <bodyvàgt; <p style=”padding-left: 15px; border:1px solid black;”> Vi du doan van co Left Padding da duoc xac dinh bang gia tri px </pvàgt; <p style=”padding-left: 15%; border:1px solid black;”> Vi du doan van co Left Padding da duoc xac dinh bang gia tri percent </pvàgt; </bodyvàgt; </htmlvàgt;

Kết quả là:

Tính chất padding-right trong CSS

Để xác định phần padding bên phải của nội dung hiển thị, chúng ta có thể sử dụng tính chất padding-right. Tính chất này còn có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Ví dụ sau minh họa cách sử dụng tính chất padding-right trong CSS:

<htmlvàgt; <headvàgt; </headvàgt; <bodyvàgt; <p style=”padding-right: 15px; border:1px solid black;”> Vi du doan van co Right Padding da duoc xac dinh bang gia tri px </pvàgt; <p style=”padding-right: 5%; border:1px solid black;”> Vi du doan van co Right Padding da duoc xac dinh bang gia tri percent </pvàgt; </bodyvàgt; </htmlvàgt;

Kết quả là:

Tính chất padding trong CSS

Sử dụng tính chất padding khiến cho bạn viết ít code hơn mà vẫn có thể điều khiển và tinh chỉnh được phần không gian padding xung quanh nội dung hiển thị của một thành phần. Tính chất này còn có thể nhận giá trị dưới dạng chiều dài hoặc dạng %. %.

Tùy theo trật tự các giá trị bạn xác định trong tính chất padding mà các tính chất trên sẽ nhận giá trị tương ứng như sau:

Nếu tính chất padding có 4 giá trị:

padding: 25px 50px 75px 100px;

• phần padding phía trên là 25px

• phần padding bên phải là 50px

• phần padding phía dưới là 75px

• phần padding bên trái là 100px

Nếu tính chất padding có 3 giá trị:

padding: 25px 50px 75px;

• phần padding phía trên là 25px

• phần padding bên phải và trái là 50px

• phần padding phía dưới là 75px

Nếu tính chất padding có 2 giá trị:

padding: 25px 50px;

• phần padding phía trên và dưới là 25px

• phần padding bên phải và trái là 50px

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

padding: 25px;

• cả 4 phần padding trên, dưới, trái và phải đều có mức giá trị là 25px

Ví dụ sau minh họa cách sử dụng tính chất padding trong CSS:

<htmlvàgt; <headvàgt; </headvàgt; <bodyvàgt; <p style=”padding: 15px; border:1px solid black;”> Ca 4 phan Padding deu co gia tri la 15px </pvàgt; <p style=”padding:10px 2%; border:1px solid black;”> Top va Bottom Padding la 10px, Left va Right Padding se bang 2% tong do rong cua trang. </pvàgt; <p style=”padding: 10px 2% 10px; border:1px solid black;”> Top Padding la 10px, Left va Right Padding se bang 2% tong do rong cua trang, Bottom Padding la 10px </pvàgt; <p style=”padding: 10px 2% 10px 10px; border:1px solid black;”> Top Padding la 10px, Right Padding se bang 2% tong do rong cua trang, Bottom Padding va Top Padding la 10px </pvàgt; </bodyvàgt; </htmlvàgt;

Kết quả là: