Thuộc tính Padding trong CSS – w3seo padding CSS lưu ý cần thiết

của chúng tôi là thẻ

. Thẻ

này chứa văn bản Đây là một cái hộp. Chúng tôi cũng đã tạo một thuộc tính CSS có tên .box lưu trữ các kiểu mà chúng tôi áp dụng cho thẻ

Thuộc tính CSS của chúng tôi đặt phần padding cho trên cùng và dưới cùng của hộp thành 40 px và phần padding cho những cạnh bên trái và phải của hộp thành 25 px. Chúng tôi cũng chỉ định một border màu xanh đậm 1 px xung quanh hộp của chúng tôi. Điều này được cho phép chúng tôi thấy hiệu ứng padding đang hoạt động giải trí .
Trong khi mã này rõ ràng, có một cách để rút ngắn nó. Chúng ta hoàn toàn có thể làm như vậy bằng cách sử dụng thuộc tính viết tắt CSS padding. Chúng tôi hoàn toàn có thể quyết định hành động làm điều này để làm cho mã của chúng tôi dễ đọc hơn .

Viết tắt CSS Padding

Thuộc tính padding (hay còn gọi là “thuộc tính padding”) là viết tắt của bốn thuộc tính padding riêng lẻ được đề cập ở trên trong CSS. Bằng cách sử dụng thuộc tính padding, bạn có thể xác định padding cho một phần tử HTML trên một dòng.

Cú pháp cho cách viết tắt padding như sau :
padding : value1 value2 value3 value4 ;
Khi sử dụng thuộc tính padding, bạn phải chỉ định tối thiểu một giá trị .
Cách viết tắt padding hoạt động giải trí theo nhiều cách khác nhau tùy thuộc vào số lượng giá trị bạn chỉ định. Hãy xem qua một ví dụ về cách hoạt động giải trí của thuộc tính padding trong toàn bộ những trường hợp sử dụng tiềm năng .

Bốn giá trị

Giả sử bạn muốn thêm phần padding trên toàn bộ những mặt của thành phần HTML .
Bạn hoàn toàn có thể làm như vậy bằng cách sử dụng thuộc tính padding và chỉ định bốn giá trị. Các giá trị bạn chỉ định nên sử dụng theo thứ tự sau :

• Giá trị đầu tiên là phần padding top.
• Giá trị thứ hai là phần padding right.
• Giá trị thứ ba là phần padding bottom.
• Giá trị thứ tư là phần padding left.

Hãy xem xét hình ảnh minh họa dưới đây để diễn đạt điều này .
Trình bày trực quan những thuộc tính con của CSS Padding được đánh số

Dưới đây là một ví dụ sử dụng thuộc tính padding để thêm padding xung quanh tổng thể bốn mặt của một thành phần :

.box {
	padding: 40px 25px 40px 25px;
	border: 1px solid blue;
}

Trong ví dụ này, chúng tôi đã sử dụng thuộc tính padding để thêm padding xung quanh nội dung của hộp của chúng tôi. Dưới đây là những giá trị chúng tôi đã chỉ định cho phần padding của mình :

• Top: 40px
• Right: 25px
• Bottom: 40px
• Left: 25px

Chúng tôi cũng chỉ định một border màu xanh lam đặc rộng 1 px để giúp bạn thuận tiện nhìn thấy vị trí chúng tôi đã vận dụng phần padding. Như bạn hoàn toàn có thể thấy trong ví dụ trên, chúng tôi hoàn toàn có thể xác lập vùng padding của thành phần chỉ bằng một dòng mã ( thay vào đó của bốn ) .

Ba giá trị

Nếu bạn muốn phần padding bên phải và bên trái của một thành phần giống nhau, nhưng bạn muốn sử dụng những giá trị trên và dưới khác nhau, bạn hoàn toàn có thể chỉ định ba giá trị bằng cách sử dụng thuộc tính padding .
Dưới đây là thứ tự những giá trị sẽ Open khi chỉ định ba giá trị với thuộc tính padding :

• Giá trị đầu tiên là phần padding top.
• Giá trị thứ hai là phần padding right và left.
• Giá trị thứ ba là phần padding bottom.

Giả sử tất cả chúng ta muốn tạo một hộp có padding trên cùng 50 px, padding dưới 75 px và padding 100 px ở cả hai bên trái và phải. Chúng tôi hoàn toàn có thể làm như vậy bằng cách sử dụng mã này :

.box {
	padding: 50px 100px 75px;
	border: 1px solid blue;
}

Trong ví dụ này, phần padding ở cả bên trái và bên phải của hộp là 100 px, nhưng chúng tôi đã chỉ định những giá trị padding khác nhau cho phần trên cùng ( 50 px ) và phần dưới cùng ( 75 px ) của hộp .
Như trong những ví dụ ở trên, chúng tôi đã chỉ định một border màu xanh lam xung quanh hộp của chúng tôi để chúng tôi hoàn toàn có thể thấy nơi padding của chúng tôi có hiệu lực hiện hành .

Hai giá trị

Nếu phần padding trên cùng và dưới cùng của một thành phần phải giống nhau và phần padding bên phải và bên trái cũng phải giống nhau, bạn hoàn toàn có thể chỉ định hai giá trị bằng thuộc tính padding .
Thứ tự những giá trị sẽ Open nếu bạn chỉ định hai vùng padding với thuộc tính padding là :

• Giá trị đầu tiên là phần padding top và bottom.
• Giá trị thứ hai là phần padding right và left.

Giả sử tất cả chúng ta muốn tạo một hộp với phần padding 50 px ở trên cùng và dưới cùng của thành phần, và phần padding 75 px ở bên trái và bên phải của thành phần. Chúng tôi hoàn toàn có thể làm như vậy bằng cách sử dụng mã này :

.box {
	padding: 50px 75px;
	border: 1px solid blue;
}

Trong ví dụ này, phần padding cho top và bottom của tất cả chúng ta giống nhau : 50 px. Phần padding cho những cạnh left và right của hộp đều được đặt thành 75 px .
Như trên, chúng tôi cũng đã chỉ định một border màu xanh lam để chúng tôi hoàn toàn có thể thuận tiện nhìn thấy phần padding xung quanh hộp của chúng tôi .

Một giá trị

Nếu bạn muốn thêm cùng một lượng padding xung quanh tổng thể những mặt của một thành phần, bạn chỉ cần chỉ định một giá trị khi sử dụng thuộc tính padding. Một giá trị bạn chỉ định là phần padding sẽ được vận dụng cho toàn bộ những mặt của một thành phần đơn cử .
Dưới đây là ví dụ về kiểu CSS sẽ thêm phần padding 20 px xung quanh tổng thể những cạnh của những thành phần trong hộp :

.box {
	padding: 20px;
}

Hộp ở trên của chúng tôi có một phần padding 20 px xung quanh mọi cạnh của thành phần trong hộp .

Padding, Width và Thuộc tính CSS Box-Sizing

Thông thường, khi phong cách thiết kế một thành phần trong CSS, bạn sẽ sử dụng thuộc tính width để chỉ định chiều rộng của một thành phần. Tuy nhiên, nếu bạn sử dụng thuộc tính width phối hợp với thuộc tính padding, một số ít yếu tố hoàn toàn có thể phát sinh .
Nếu bạn vận dụng phần padding cho một thành phần có chiều rộng đơn cử, phần padding được chỉ định cho thành phần đó sẽ được thêm vào tổng chiều rộng của thành phần. Vì vậy, ví dụ : nếu bạn đang phong cách thiết kế một hộp có chiều rộng 200 px và chỉ định phần padding 20 px, thì tổng chiều rộng của hộp sẽ được đặt thành 240 px ( 20 px cho phần padding bên trái + 20 px cho phần padding bên phải ) .
Dưới đây là đoạn mã minh họa hiệu ứng này trong trong thực tiễn :

.box {
	width: 200px;
	padding: 20px;
	border: 1px solid blue;
}

.box2 {
	width: 200px;
	border: 1px solid blue;
}

Ở trên cùng, tất cả chúng ta có một hộp có padding 20 px và ở dưới cùng, tất cả chúng ta có một hộp không có padding. Như bạn hoàn toàn có thể thấy, tổng chiều rộng của hộp thứ hai là 200 px. Tuy nhiên, vì những nguyên do mà tất cả chúng ta đã bàn luận trước đó, tổng chiều rộng của hộp tiên phong của tất cả chúng ta là 240 px .

Nếu chúng ta muốn hộp trên cùng của mình có chiều rộng 200px ngay cả khi giá trị padding được chỉ định, chúng ta có thể sử dụng thuộc tính CSS box-sizing. Dưới đây là một ví dụ về thuộc tính này đang hoạt động:

.box {
	width: 200px;
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid blue;
}

.box2 {
	width: 200px;
	border: 1px solid blue;
}

Cả hai hộp của chúng tôi hiện có chiều rộng 200 px. Thuộc tính box-sizing hướng dẫn hộp tiên phong của tất cả chúng ta giữ lại chiều rộng của nó mặc dầu code chỉ định một giá trị padding mà trong điều kiện kèm theo mặc định sẽ dẫn đến một hộp rộng hơn .

Phần kết luận

Thuộc tính CSS padding được sử dụng để chỉ định khoảng trống sẽ Open giữa một thành phần và border của nó. Thuộc tính padding có bốn thuộc tính con, mỗi thuộc tính được cho phép bạn đặt padding cho một cạnh — hoặc những cạnh — của một thành phần .
Hướng dẫn này đã luận bàn về cách sử dụng thuộc tính CSS padding và những thuộc tính con của nó. Chúng tôi đã sử dụng những ví dụ để minh họa những khái niệm được đàm đạo ở đây. Bây giờ bạn đã có kiến ​ ​ thức thiết yếu để mở màn sử dụng thuộc tính padding và những thuộc tính con của nó trong mã CSS của bạn như một người chuyên nghiệp !