Thuộc Tính Padding Trong CSS

Có thể bạn quan tâm

CSS cơ bản
Giới thiệu CSS
CSS là gì ?
Cú pháp CSS
Include CSS vào HTML
Đơn vị
Màu (Color)
Background
Định dạng Font
Định dạng Text
Hình ảnh
Trang trí Link
Bảng
Đường viền (Border)
Căn lề (Margin)
List và Marker
Padding
Con trỏ (Cursor)
Outline
Kích thước
Scrollbar

CSS nâng cao
Visibility
Căn chỉnh vị trí
Layer (Thuộc tính z-index)
Giới thiệu Pseudo Class
Phần tử giả (Pseudo Element)
Qui tắc @
Media Type
Qui tắc @page
Định dạng trước khi in
Thiết lập Layout
Validation

Học CSS3 cơ bản
Giới thiệu CSS3
Rounded Corner
Thuộc tính Border Image
Multi Background
Màu trong CSS3
Gradient là gì ?
Tạo Shadow
Tạo hiệu ứng cho Text
Web Font
2D Transform
3D Transform
Hiệu ứng (Animation)
Chia cột (Multi Column)
User Interface
Thuộc tính box-sizing

Khái niệm CSS Responsive
CSS Responsive là gì ?

Tra cứu nhanh CSS
Tổng hợp tất cả Thuộc tính
Danh sách tên màu
Web Safe Font
Tổng hợp các Hiệu ứng

CSS Tool
Chuyển đổi PX sang EM

Thuộc tính padding trong CSS Trang trước Trang sau

Thuộc tính padding cho phép bạn xác định khoảng không gian giữa nội dung hiển thị của một phần tử với đường viền của nó.

Giá trị của thuộc tính 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 thuộc tính là inherit, thì phần tử sẽ kế thừa giá trị của thuộc tính padding này từ phần tử 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 phần tử 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 bao quanh nội dung, mà còn có 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. Dưới đây là các thuộc tính trong CSS giúp bạn thực hiện việc này:

Thuộc tính padding-bottom xác định phần padding bên dưới của một phần tử.
Thuộc tính padding-top xác định phần padding bên trên của một phần tử.
Thuộc tính padding-left xác định phần padding bên trái của một phần tử.
Thuộc tính padding-right xác định phần padding bên phải của một phần tử.
Thuộc tính padding giúp bạn xác định toàn bộ các thuộc tính trên, tức là có thể xác định toàn bộ phần không gian padding bao quanh một phần tử.

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

Thuộc tính padding-bottom trong CSS

Để xác định phần padding bên dưới của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-bottom. Thuộc tính này 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 thuộc tính padding-bottom trong CSS:

<html> <head> </head> <body> Vi du doan van co Bottom Padding da duoc xac dinh bang gia tri pixel Vi du doan van co Bottom Padding da duoc xac dinh bang gia tri percent </body> </html>

Kết quả là:

Quảng cáo

Thuộc tính padding-top trong CSS

Để xác định phần padding bên trên của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-top. Thuộc tính này 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 thuộc tính padding-top trong CSS:

<html> <head> </head> <body> Vi du doan van co Top Padding da duoc xac dinh bang gia tri pixel Vi du doan van co Top Padding da duoc xac dinh bang gia tri percent </body> </html>

Kết quả là:

Thuộc tính padding-left trong CSS

Để xác định phần padding bên trái của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-left. Thuộc tính này 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ị, bạn có thể sử dụng thuộc tính padding-left. Thuộc tính này có thể nhận giá trị dưới dạng chiều dài hoặc dạng %.

<html> <head> </head> <body> Vi du doan van co Left Padding da duoc xac dinh bang gia tri pixel Vi du doan van co Left Padding da duoc xac dinh bang gia tri percent </body> </html>

Kết quả là:

Quảng cáo

Thuộc tính padding-right trong CSS

Để xác định phần padding bên phải của nội dung hiển thị, bạn có thể sử dụng thuộc tính padding-right. Thuộc tính này 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 thuộc tính padding-right trong CSS:

<html> <head> </head> <body> Vi du doan van co Right Padding da duoc xac dinh bang gia tri pixel Vi du doan van co Right Padding da duoc xac dinh bang gia tri percent </body> </html>

Kết quả là:

Thuộc tính padding trong CSS

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

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

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

padding: 25px 50px 75px 100px;

phần padding bên trên là 25px
phần padding bên phải là 50px
phần padding bên dưới là 75px
phần padding bên trái là 100px

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

padding: 25px 50px 75px;

phần padding bên trên là 25px
phần padding bên phải và trái là 50px
phần padding bên dưới là 75px

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

padding: 25px 50px;

phần padding bên trên và dưới là 25px
phần padding bên phải và trái là 50px

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

padding: 25px;

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

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

<html> <head> </head> <body> Ca 4 phan Padding deu co gia tri la 15px Top va Bottom Padding la 10px, Left va Right Padding se bang 2% tong do rong cua trang. Top Padding la 10px, Left va Right Padding se bang 2% tong do rong cua trang, Bottom Padding la 10px Top Padding la 10px, Right Padding se bang 2% tong do rong cua trang, Bottom Padding va Top Padding la 10px </body> </html>

Kết quả là:

👉 Giải bài nhanh với AI Hay:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: