Hướng dẫn padding trong html
Show Định nghĩa và sử dụngThuộc tính padding thêm vào khoảng không cho thành phần. Cấu trúctag { padding: giá trị; } Với giá trị như sau:
Cách sử dụng thuộc tính padding:
HTML viết:
Giả sử ban đầu CSS viết:div { border: 1px solid red; } div p { background: #66CC00; } Hiển thị trình duyệt khi chưa có thuộc tính padding:Thêm thuộc tính padding vào CSS:div { border: 1px solid red; } div p { background: #66CC00; padding: 20px 0 0 0; } Dòng padding ở trên tương đương với các giá trị sau: Hiển thị trình duyệt khi đã thêm max-height vào CSS:Trình duyệt hỗ trợThuộc tính padding được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype
paddingThuộ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:
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. Chuẩn bịTạo file HTML và CSS có cấu trúc thư mục và nội dung như sau: Cấu trúc thư mục
Click vào dấu [+] để xem cấu trúc. HTML viết
Thành phần có sử dụng thuộc tính padding. Hiển thị trình duyệt khi chưa có CSSThành phần có sử dụng thuộc tính padding. CSSĐể dễ hình dung thuộc tính padding, ta sẽ cho thành phần và thành phần
có nội dung như sau: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; width: 400px; } Hiển thị trình duyệt khi chưa sử dụng paddingThành phần có sử dụng thuộc tính padding. Download phần chuẩn bị padding-topCấu trúc: Ta thêm nội dung CSS tại thẻ đoạn code padding-top với giá trị 20px: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-top: 20px; width: 400px; } Hiển thị trình duyệt khi sử dụng padding-top: 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 cao hiện tại của thành phần đã được cộng dồn thêm 20px. padding-rightCấu trúc: 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ệtThành phần có sử dụng thuộc tính padding. Phân tích: padding-bottomCấu trúc: Ta thêm nội dung CSS tại thẻ đoạn code padding-bottom với giá trị 20px: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-bottom: 20px; width: 400px; } Hiển thị trình duyệt khi sử dụng padding-bottom: 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 cao hiện tại của thành phần đã được cộng dồn thêm 20px. padding-leftCấu trúc: Ta thêm nội dung CSS tại thẻ đoạn code padding-left với giá trị 20px: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-left: 20px; width: 400px; } 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: 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ụ: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding-left: 20px; width: 380px; } Hiển thị trình duyệtThành phần có sử dụng thuộc tính padding. Phân tích: padding với 4 giá trịCấu trúc: Đâ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, trong đó:
Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị lần lượt là 20px 30px 40px 20px: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px 40px 20px; width: 400px; } Hiển thị trình duyệt khi sử dụng padding: 20px 30px 40px 20px;Thành phần có sử dụng thuộc tính padding. Phân tích: Ta thấy: chiều rộng và chiều cao của thành phần đã được cộng dồn thêm, cụ thể là chiều rộng hiện tại của thành phần là 450px, chiều cao hiện tại của thành phần được cộng thêm 60px. Muố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: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px 40px 20px; width: 350px; } Hiển thị trình duyệtThành phần có sử dụng thuộc tính padding. Phân tích: padding với 3 giá trịCấu trúc: Đâ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ị 3 giá trị, chúng ta sử dụng dạng này trong trường hợp padding-left và padding-right có cùng giá trị, trong đó:
Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị lần lượt là 20px 30px 40px: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px 40px; width: 400px; } Hiển thị trình duyệt khi sử dụng padding: 20px 30px 40px;Thành phần có sử dụng thuộc tính padding. Phân tích: 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 20px của padding-top và 40px của 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: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px 40px; width: 340px; } Hiển thị trình duyệtThành phần có sử dụng thuộc tính padding. Phân tích: padding với 2 giá trịCấu trúc: Đâ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ị 2 giá trị, chúng ta sử dụng dạng này trong trường hợp padding-left có cùng giá trị với padding-right, padding-top có cùng giá trị với padding-bottom , trong đó:
Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị lần lượt là 20px 30px: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px; width: 400px; } Hiển thị trình duyệt khi sử dụng padding: 20px 30px;Thành phần có sử dụng thuộc tính padding. Phân tích: 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: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px; width: 340px; } Hiển thị trình duyệtThà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: Đâ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 đó:
Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị là 30px: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 30px; width: 400px; } 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: 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: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 30px; width: 340px; } Hiển thị trình duyệtThành phần có sử dụng thuộc tính padding. Phân tích: Kết hợp dạng tổng quát và dạng cơ bảnCấu trúc: Đâ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: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px 40px; width: 400px; } Hiển thị trình duyệt khi sử dụng padding: 20px 30px 40px;Thành phần có sử dụng thuộc tính padding. Phân tích: 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: * { margin: 0; padding: 0; } div { border: 1px solid red; } p { background: yellow; padding: 20px 30px 40px; padding-left: 10px; width: 400px; } Hiển thị trình duyệtThành phần có sử dụng thuộc tính padding. Phân tích: |