Khi thiết kế một phần tử web, bạn có thể muốn một khoảng trống xuất hiện giữa nội dung của phần tử và border của phần tử đó. Ví dụ: nếu bạn đang thiết kế một hộp có văn bản bên trong, bạn có thể muốn có một khoảng cách giữa văn bản bên trong hộp và các border của hộp.
Đó là nơi xuất hiện thuộc tính CSS padding. Thuộc tính CSS padding tạo ra một khoảng trống giữa nội dung của một phần tử và các border được xác định cho phần tử đó.
Hướng dẫn này sẽ thảo luận, với các ví dụ, cách sử dụng thuộc tính padding trong CSS.
CSS Padding là gì?
Thuộc tính CSS padding cho phép bạn thêm khoảng cách giữa một phần tử và các border của nó.
Thuộc tính padding là viết tắt của bốn thuộc tính phụ CSS padding đặt các cạnh trên, phải, dưới và trái của một phần tử HTML.
Phần padding cho một hộp khác với thuộc tính margin trong CSS. Trong khi thuộc tính padding cho phép bạn thêm không gian bên trong border của một phần tử, thì thuộc tính margin cho phép bạn thêm khoảng cách xung quanh bên ngoài border của phần tử.
- Padding Thêm khoảng cách giữa một phần tử và các border của nó.
- Margin Thêm khoảng trống xung quanh (bên ngoài) các border của một phần tử.
Thuộc tính CSS padding
Có bốn thuộc tính được sử dụng để chỉ định phần padding cho mỗi bên của một phần tử. Đó là:
- padding-top
- padding-right
- padding-bottom
- padding-left
Hãy xem bên dưới để biết hình ảnh minh họa về bốn đặc tính con của padding trong CSS.
Trình bày trực quan các thuộc tính phụ của CSS Padding
Trong CSS, tất cả các thuộc tính padding có thể chấp nhận ba giá trị khác nhau. Đó là:
- inherit. Chỉ định phần padding mà một phần tử sẽ kế thừa từ phần tử gốc.
- length. Xác định độ dài của phần padding của một phần tử (bằng px, em, cm, v.v.).
- percentage (%). Chỉ định phần padding của một phần tử dưới dạng phần trăm chiều rộng của phần tử mẹ của phần tử đó.
Giả sử chúng ta đang thiết kế một div cho một trang web. Chúng tôi muốn hộp có phần padding 25px ở hai bên trái và phải, và phần padding 40px phía trên (trên cùng) và bên dưới (dưới cùng) hộp.
Chúng tôi có thể sử dụng mã sau để thực hiện nhiệm vụ này:
<div class="box">
<p>
This is a box
</p>
</div>
styles.css
.box {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 25px;
padding-right: 25px;
border: 1px solid blue;
}
Trong ví dụ này, chúng tôi đã xác định một phần tử <div> để tạo mô hình hộp của chúng tôi. Bên trong thẻ <div> của chúng tôi là thẻ <p>. Thẻ <p> 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ẻ <div> của mình.
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 40px và phần padding cho các cạnh bên trái và phải của hộp thành 25px. Chúng tôi cũng chỉ định một border màu xanh đậm 1px xung quanh hộp của chúng tôi. Điều này cho phép chúng tôi thấy hiệu ứng padding đang hoạt động.
Trong khi mã này rõ ràng, có một cách để rút ngắn nó. Chúng ta 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 có thể quyết định 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 nhất một giá trị.
Cách viết tắt padding hoạt động 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 của thuộc tính padding trong tất cả các 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 tất cả các mặt của phần tử HTML.
Bạ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 để mô tả điều này.
Trình bày trực quan các 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ất cả bốn mặt của một phần tử:
.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à các 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 1px để giúp bạn dễ dàng nhìn thấy vị trí chúng tôi đã áp dụng phần padding. Như bạn có thể thấy trong ví dụ trên, chúng tôi có thể xác định vùng padding của phần tử 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 phần tử giống nhau, nhưng bạn muốn sử dụng các giá trị trên và dưới khác nhau, bạ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ự các giá trị sẽ xuất hiện 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ử chúng ta muốn tạo một hộp có padding trên cùng 50px, padding dưới 75px và padding 100px ở cả hai bên trái và phải. Chúng tôi 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à 100px, nhưng chúng tôi đã chỉ định các giá trị padding khác nhau cho phần trên cùng (50px) và phần dưới cùng (75px) của hộp.
Như trong các 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 có thể thấy nơi padding của chúng tôi có hiệu lực.
Hai giá trị
Nếu phần padding trên cùng và dưới cùng của một phần tử 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 có thể chỉ định hai giá trị bằng thuộc tính padding.
Thứ tự các giá trị sẽ xuất hiện 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ử chúng ta muốn tạo một hộp với phần padding 50px ở trên cùng và dưới cùng của phần tử, và phần padding 75px ở bên trái và bên phải của phần tử. Chúng tôi 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 chúng ta giống nhau: 50px. Phần padding cho các cạnh left và right của hộp đều được đặt thành 75px.
Như trên, chúng tôi cũng đã chỉ định một border màu xanh lam để chúng tôi có thể dễ dàng 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ất cả các mặt của một phần tử, 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 áp dụng cho tất cả các mặt của một phần tử cụ thể.
Dưới đây là ví dụ về kiểu CSS sẽ thêm phần padding 20px xung quanh tất cả các cạnh của các phần tử trong hộp:
.box {
padding: 20px;
}
Hộp ở trên của chúng tôi có một phần padding 20px xung quanh mọi cạnh của phần tử trong hộp.
Padding, Width và Thuộc tính CSS Box-Sizing
Thông thường, khi thiết kế một phần tử trong CSS, bạn sẽ sử dụng thuộc tính width để chỉ định chiều rộng của một phần tử. Tuy nhiên, nếu bạn sử dụng thuộc tính width kết hợp với thuộc tính padding, một số vấn đề có thể phát sinh.
Nếu bạn áp dụng phần padding cho một phần tử có chiều rộng cụ thể, phần padding được chỉ định cho phần tử đó sẽ được thêm vào tổng chiều rộng của phần tử. Vì vậy, ví dụ: nếu bạn đang thiết kế một hộp có chiều rộng 200px và chỉ định phần padding 20px, thì tổng chiều rộng của hộp sẽ được đặt thành 240px (20px cho phần padding bên trái + 20 pixel cho phần padding bên phải).
Dưới đây là đoạn mã minh họa hiệu ứng này trong thực tế:
.box {
width: 200px;
padding: 20px;
border: 1px solid blue;
}
.box2 {
width: 200px;
border: 1px solid blue;
}
Ở trên cùng, chúng ta có một hộp có padding 20px và ở dưới cùng, chúng ta có một hộp không có padding. Như bạn có thể thấy, tổng chiều rộng của hộp thứ hai là 200px. Tuy nhiên, vì những lý do mà chúng ta đã thảo luận trước đó, tổng chiều rộng của hộp đầu tiên của chúng ta là 240px.
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 200px. Thuộc tính box-sizing hướng dẫn hộp đầu tiên của chúng ta giữ lại chiều rộng của nó mặc dù code chỉ định một giá trị padding mà trong điều kiện mặc định sẽ dẫn đến một hộp rộng hơn.
Cách sử dụng CSS padding cho một phần tử?
CSS padding là một tính năng của CSS, cho phép bạn thiết lập khoảng trắng (padding) trong một phần tử HTML. Bạn có thể sử dụng CSS padding để tạo ra một khoảng trắng giữa nội dung phần tử và viền của phần tử.
Cách sử dụng CSS padding cho một phần tử:
- Chọn phần tử cần thay đổi padding:
<div class="element">This is an element</div>
- Thêm một định nghĩa CSS cho phần tử:
.element {
padding: 10px;
}Trong ví dụ trên, padding: 10px; sẽ tạo một khoảng trắng 10px xung quanh nội dung phần tử. Bạn cũng có thể thay đổi kích thước padding cho mỗi trục (top, right, bottom, left) bằng cách sử dụng các giá trị riêng biệt:
.element {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
}Hoặc bạn cũng có thể sử dụng các giá trị tổng hợp để thay đổi padding cho tất cả các trục:
.element {
padding: 10px 20px 15px 25px;
}Trong ví dụ này, giá trị 10px 20px 15px 25px tương đương với padding-top: 10px; padding-right: 20px; padding-bottom: 15px; padding-left: 25px;
Làm cách nào để tạo padding cho phần tử trong CSS theo độ phân giải màn hình khác nhau?
Trong CSS, padding có thể được thiết lập cho phần tử theo độ phân giải màn hình khác nhau bằng cách sử dụng Media Queries. Media Queries là một công cụ trong CSS cho phép bạn thiết lập tùy chỉnh cho các tài liệu HTML dựa trên các điều kiện về màn hình hoặc thiết bị.
Ví dụ, nếu bạn muốn thiết lập padding cho phần tử .element trên màn hình có độ rộng từ 0 đến 767 pixels, bạn có thể sử dụng như sau:
.element {
padding: 20px;
}
@media (max-width: 767px) {
.element {
padding: 10px;
}
}Trong ví dụ này, padding được thiết lập là 20 pixels trên màn hình có độ rộng lớn hơn 767 pixels và 10 pixels trên màn hình có độ rộng nhỏ hơn hoặc bằng 767 pixels.
Phần kết luận
Thuộc tính CSS padding được sử dụng để chỉ định khoảng trống sẽ xuất hiện giữa một phần tử và border của nó. Thuộc tính padding có bốn thuộc tính con, mỗi thuộc tính cho phép bạn đặt padding cho một cạnh — hoặc các cạnh — của một phần tử.
Hướng dẫn này đã thảo luận về cách sử dụng thuộc tính CSS padding và các thuộc tính con của nó. Chúng tôi đã sử dụng các ví dụ để minh họa các khái niệm được thảo luận ở đây. Bây giờ bạn đã có kiến thức cần thiết để bắt đầu sử dụng thuộc tính padding và các thuộc tính con của nó trong mã CSS của bạn như một người chuyên nghiệp!
