Padding trong CSS

Các thuộc tính CSS về Padding

Các thuộc tính CSS về padding được sử dụng để tạo ra không gian xung quanh nội dung.

Các thuộc tính thiết lập kích thước của vùng trắng giữa nội dung và đường viền.

Phần tử này có padding là 50px.

CSS Padding

Các thuộc tính CSS về padding xác định vùng trắng giữa nội dung và đường viền.

Padding tạo một vùng trắng bao quanh nội dung (nằm trong đường viền) của một phần tử.

Lưu ý: Padding bị ảnh hưởng bởi màu nền của phần tử!

Với CSS, bạn có thể điều khiển toàn bộ padding. Có các thuộc tính CSS để thiết lập padding cho mỗi phía của một phần tử (phía trên - top, bên phải - right, phía dưới - bottom và bên trái - left).

Padding - Các phía độc lập

CSS có các thuộc tính để chỉ định padding cho mỗi phía (trên, phải, dưới, trái) của một phần tử:

·         padding-top

·         padding-right

·         padding-bottom

·         padding-left

Tất cả các thuộc tính về padding có thể có giá trị như sau:

·         con số cụ thể - chỉ định giá trị của padding theo px, pt, cm, v.v.

·         % - chỉ định padding theo % của chiều rộng\cao của phần tử chứa

·         inherit - xác định rằng padding thừa kế từ các phần tử cha

Ví dụ sau thiết lập padding cho tất cả bốn phía của phần tử <p> khác nhau:

p {

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

Try it yourself »

Padding - Thuộc tính rút gọn

Để mã ngắn gọn, chúng ta có thể chỉ định tất cả thuộc tính về padding bằng một thuộc tính.

Thuộc tính padding là thuộc tính rút gọn cho các thuộc tính về padding sau đây:

·         padding-top

·         padding-right

·         padding-bottom

·         padding-left

p{

padding: 50px 30px 50px 80px;

}

Try it yourself »

Sau đây là cách hoạt động của thuộc tính này:

Nếu thuộc tính padding có bốn giá trị:
padding: 25px 50px 75px 100px;

• padding trên (top) là 25px
• padding phải (right) là 50px
• padding dưới (bottom) là 75px
• padding trái (left) là 100px

Nếu thuộc tính padding có ba giá trị:
padding: 25px 50px 75px;

• padding trên 9 (top) là 25px
• padding phải(right) và trái (left) là 50px
• padding dưới (bottom) là 75px

Nếu thuộc tính padding có hai giá trị:
padding: 25px 50px;

• padding trên (top) và dưới (bottom) là 25px
• padding phải (right) và trái (left) là 50px 

Nếu thuộc tính padding có một giá trị:padding: 25px;

• Tất cả các padding (top, right, bottom, left) đều là 25px

Ví dụ khác

Tất cả các thuộc tính chất padding trong một mô tả

Ví dụ này cho thấy một thuộc tính rút gọn thiết lập tất cả các thuộc tính padding trong một mô tả (declaration), có thể có từ một đến bốn giá trị.

Thiết lập padding trái

Ví dụ này cho thấy cách thiết lập padding bên trái của phần tử <p>.

Thiết lập padding phải

Ví dụ này cho thấy cách thiết lập padding bên phải của phần tử <p>.

Thiết lập padding trên

Ví dụ này cho thấy cách thiết lập padding trên (top) của một phần tử <p>.

Thiết lập padding dưới

Ví dụ này cho thấy cách thiết lập padding dưới (bottom) của một phần tử <p>.

Tự làm bài tập!

Exercise 1 » Exercise 2 » Exercise 3 »

Tất cả các thuộc tính CSS về Padding

Thuộc tính	Mô tả
padding	Thuộc tính rút gọn để thiết lập tất cả các padding (top, right, bottom, left) trong (declaration)
padding-bottom	Thiết lập padding dưới (bottom) của một phần tử
padding-left	Thiết lập padding trái (left) của một phần tử
padding-right	Thiết lập padding phải (right) cho một phần tử
padding-top	Thiết lập padding trên (top) cho một phần tử

CodeLean.vn

Facebook: CodeLean Community