- Trang chủ
- Tham khảo
- CSS
- Thuộc tính padding
Định nghĩa và sử dụng
Thuộc tính padding thêm vào khoảng không cho thành phần.
Cấu trúc
tag { padding: giá trị; }
Với giá trị như sau:
padding | đơn vị inherit inherit | padding: 5px 10px 3px 20px; | Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ... |
padding-top | đơn vị inherit inherit | padding: 5px 10px 3px 20px; | Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ... |
padding-top | đơn vị inherit inherit | padding: 5px 10px 3px 20px; | Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ... |
padding-top | đơn vị inherit inherit | padding: 5px 10px 3px 20px; | Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ... |
padding-top | đơn vị inherit inherit | padding: 5px 10px 3px 20px; | Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ... |
padding-top
padding | đơn vị inherit | padding: 5px 10px 3px 20px; | padding: 5px 10px 3px 20px; | Đây là cách viết ngắn gọn các thuộc tính bên dưới, đơn vị có thể là px, em, %, ... padding-right: 10px padding-bottom: 3px padding-left: 20px |
padding-top | padding-top: 5px; | Thêm vào khoảng không bên trên cho thành phần, đơn vị có thể là px, em, %, ... | padding-right padding-right: 10px padding-left: 10px padding-bottom: 15px | |
padding-right: 5px; | Thêm vào khoảng không bên phải cho thành phần, đơn vị có thể là px, em, %, ... | padding-bottom | padding-bottom: 5px; padding-bottom: 5px padding-right: 10px padding-left: 10px | |
Thêm vào khoảng không bên dưới cho thành phần, đơn vị có thể là px, em, %, ... | padding-left | padding-left: 5px; | Thêm vào khoảng không bên trái cho thành phần, đơn vị có thể là px, em, %, ... padding-right: 10px padding-bottom: 10px padding-left: 10px |
Cách sử dụng thuộc tính padding:
HỌC WEB CHUẨN
Thành phần
div { border: 1px solid red; } div p { background: #66CC00; }
Thể hiện
4 thành phần
div { border: 1px solid red; } div p { background: #66CC00; padding: 20px 0 0 0; }
top right bottom left
padding-top: 20px;
padding-right: 0
padding-bottom: 0
padding-left: 0
padding-top: 5px; padding-right: 10px padding-bottom: 3px padding-left: 20px
3 thành phần
top [right left] bottom
padding: 5px 10px 15px;
- Hiển thị trình duyệt khi sử dụng padding: 20px 30px;
- Ta thấy: chiều rộng hiện tại của thành phần là 460px, chiều cao hiện tại của thành phần cũng đã được cộng dồn thêm 40px của padding-top và padding-bottom. Muốn thêm padding mà vẫn giữ nguyên chiều rộng hay chiều cao như ban đầu ta chỉ cần giảm chiều rộng hoặc chiều cao bằng khoảng padding đã được thêm vào, xem ví dụ sử dụng padding mà vẫn giữ nguyên chiều rộng:
- padding với 1 giá trị
- Cấu trúc: padding: [top left bottom right];
Cấu trúc: padding: [top left bottom right];
Đây là dạng kết hợp của 4 thuộc tính padding: padding-top, padding-right, padding-bottom và padding-left dưới dạng hiển thị 1 giá trị chung cho các thuộc tính của padding, chúng ta sử dụng dạng này trong trường hợp padding-top, padding-right, padding-left, padding-bottom có cùng giá trị, trong đó:
[top left bottom right]: là giá trị chung của padding-top, padding-right, padding-left và padding-bottom
Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị là 30px:
- Hiển thị trình duyệt khi sử dụng padding: 30px;
- Ta thấy: chiều rộng hiện tại của thành phần là 460px, chiều cao hiện tại của thành phần cũng đã được cộng dồn thêm 60px của padding-top và padding-bottom. Để thêm padding mà vẫn giữ nguyên chiều rộng hay chiều cao như ban đầu ta chỉ cần giảm chiều rộng hoặc chiều cao bằng khoảng padding đã được thêm vào, xem ví dụ sử dụng padding mà vẫn giữ nguyên chiều rộng:
- Kết hợp dạng tổng quát và dạng cơ bản
- Cấu trúc: padding: giá trị tổng quát; padding-vị trí: giá trị;
Đây là dạng sử dụng dạng cơ bản sau khi đã sử dụng dạng tổng quát, mục đích muốn điều chỉnh lại giá trị cơ bản nào đó, xem ví dụ sau đây để hiểu rõ hơn.
- Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị là 20px 30px 40px:
- Hiển thị trình duyệt khi sử dụng padding: 20px 30px 40px;
- Bây giờ ta sẽ sử dụng thuộc tính cơ bản padding-left: 10px; để điều chỉnh lại giá trị của padding-left:
- Trang chủ
Hướng dẫn học được sử dụng trong trường hợp muốn điều chỉnh lại giá trị của thuộc tính tổng quát.
Hướng dẫn học CSS
padding
Thuộc tính padding khi sử dụng sẽ thêm khoảng không gian bên trong thành phần, khoảng không gian này sẽ được cộng dồn thêm vào chiều rộng hoặc chiều cao của thành phần [tùy vào hướng sử dụng padding].
-
Thuộc tính padding được chia ra làm 2 dạng:
- Dạng cơ bản gồm 4 thuộc tính:
padding-top: thêm khoảng không gian bên trong hướng trên thành phần.
- padding-right: thêm khoảng không gian bên trong hướng bên phải thành phần.
padding-bottom: thêm khoảng không gian bên trong hướng dưới thành phần.
padding-left: thêm khoảng không gian bên trong hướng bên trái thành phần.
Dạng tổng quát gồm 4 thuộc tính:
Tiêu đề trang web
padding với 4 giá trị.
Thành phần có sử dụng thuộc tính padding.
padding với 3 giá trị.
Thành phần có sử dụng thuộc tính padding.
padding với 2 giá trị.
padding với 1 giá trị.
* { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; width: 400px; }
Kết hợp dạng cơ bản và dạng tổng quát: được sử dụng trong trường hợp muốn điều chỉnh lại giá trị của thuộc tính tổng quát.
Thành phần có sử dụng thuộc tính padding.
Chuẩn bị
padding-top
Tạo file HTML và CSS có cấu trúc thư mục và nội dung như sau:
padding-top: giá trị;
Cấu trúc thư mục
* { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-top: 20px; width: 400px; }
Html
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều cao hiện tại của thành phần đã được cộng dồn thêm 20px.
padding-right
Cấu trúc: padding-right: giá trị;
padding-right: giá trị;
Ta thêm nội dung CSS tại thẻ đoạn code padding-right với giá trị 20px:
* { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-right: 20px; width: 400px; }
Hiển thị trình duyệt khi sử dụng padding-right: 20px;
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
* { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-right: 20px; width: 380px; }
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính padding.
Phân tích:
padding-bottom
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
padding-bottom: giá trị;
Hiển thị trình duyệt
* { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-bottom: 20px; width: 400px; }
Cấu trúc: padding-bottom: giá trị;
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều cao hiện tại của thành phần đã được cộng dồn thêm 20px.
padding-left
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
padding-left: giá trị;
Hiển thị trình duyệt
* { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-left: 20px; width: 400px; }
Cấu trúc: padding-bottom: giá trị;
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
0HỌC WEB CHUẨN
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
Hiển thị trình duyệt
padding: top right bottom left;
Cấu trúc: padding-bottom: giá trị;
- Ta thêm nội dung CSS tại thẻ đoạn code padding-bottom với giá trị 20px:
- Hiển thị trình duyệt khi sử dụng padding-bottom: 20px;
- Cấu trúc: padding-left: giá trị;
- Ta thêm nội dung CSS tại thẻ đoạn code padding-left với giá trị 20px:
Hiển thị trình duyệt khi sử dụng padding-left: 20px;
1HỌC WEB CHUẨN
Ta thấy: tổng chiều rộng hiện tại của thành phần là 420px, nếu muốn sử dụng padding-left mà chiều rộng không thay đổi, ta cần giảm chiều rộng bằng với khoảng padding-left, xem ví dụ:
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
2HỌC WEB CHUẨN
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
Hiển thị trình duyệt
padding: top [left right] bottom;
Cấu trúc: padding-bottom: giá trị;
- Ta thêm nội dung CSS tại thẻ đoạn code padding-bottom với giá trị 20px:
- Hiển thị trình duyệt khi sử dụng padding-bottom: 20px;
- Cấu trúc: padding-left: giá trị;
Ta thêm nội dung CSS tại thẻ đoạn code padding-left với giá trị 20px:
3HỌC WEB CHUẨN
Hiển thị trình duyệt khi sử dụng padding-left: 20px;
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
Hiển thị trình duyệt
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Nhìn vào kết quả ta thấy: chiều rộng hiện tại của thành phần không còn là 400px như ban đầu, mà đã được cộng dồn thêm 20px, tổng chiều rộng hiện tại của thành phần là 420px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như ban đầu ta cần giảm chiều rộng bằng khoảng padding-right, xem ví dụ:
Hiển thị trình duyệt
padding: [top bottom] [left right];
Cấu trúc: padding-bottom: giá trị;
- Ta thêm nội dung CSS tại thẻ đoạn code padding-bottom với giá trị 20px:
- Hiển thị trình duyệt khi sử dụng padding-bottom: 20px;
Cấu trúc: padding-left: giá trị;
5HỌC WEB CHUẨN
Ta thêm nội dung CSS tại thẻ đoạn code padding-left với giá trị 20px:
Thành phần có sử dụng thuộc tính padding.
Phân tích:
Hiển thị trình duyệt khi sử dụng padding-left: 20px;
6HỌC WEB CHUẨN
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính padding.
Phân tích:
padding với 1 giá trị
Cấu trúc: padding: [top left bottom right];
padding: [top left bottom right];
Đây là dạng kết hợp của 4 thuộc tính padding: padding-top, padding-right, padding-bottom và padding-left dưới dạng hiển thị 1 giá trị chung cho các thuộc tính của padding, chúng ta sử dụng dạng này trong trường hợp padding-top, padding-right, padding-left, padding-bottom có cùng giá trị, trong đó:
- [top left bottom right]: là giá trị chung của padding-top, padding-right, padding-left và padding-bottom
Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị là 30px:
7HỌC WEB CHUẨN
Hiển thị trình duyệt khi sử dụng padding: 30px;
Thành phần có sử dụng thuộc tính padding.
Phân tích:
padding với 1 giá trị
8HỌC WEB CHUẨN
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính padding.
Phân tích:
padding với 1 giá trị
Cấu trúc: padding: [top left bottom right];
padding: giá trị tổng quát;
padding-vị trí: giá trị;
Đây là dạng kết hợp của 4 thuộc tính padding: padding-top, padding-right, padding-bottom và padding-left dưới dạng hiển thị 1 giá trị chung cho các thuộc tính của padding, chúng ta sử dụng dạng này trong trường hợp padding-top, padding-right, padding-left, padding-bottom có cùng giá trị, trong đó:
[top left bottom right]: là giá trị chung của padding-top, padding-right, padding-left và padding-bottom
3HỌC WEB CHUẨN
Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị là 30px:
Thành phần có sử dụng thuộc tính padding.
Phân tích:
padding với 1 giá trị
div { border: 1px solid red; } div p { background: #66CC00; }0
Hiển thị trình duyệt
Thành phần có sử dụng thuộc tính padding.
Phân tích: