padding

padding

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

Bạn đang đọc: padding

Html index.html

css

padding – Thêm khoảng chưa gian bên trong thành phần

style.css

Click vào dấu [ + ] để xem cấu trúc .

HTML viết

Tiêu đề trang web Thành phần có dùng thuộc tính padding .

Hiển thị trình duyệt khi không có CSS

Thành phần có 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 không dùng padding

Thành phần có dùng thuộc tính padding . Download phần chuẩn bị sẵn sàng

padding-top

Cấu trúc: padding-top: giá trị;

Ta thêm nội dung CSS tại thẻ đoạn code padding-top với giá trị 20 px :

* 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 dùng padding-top: 20px;

Thành phần có dùng thuộc tính padding .

Phân tích:

Nhìn vào tác dụng ta thấy : chiều cao hiện tại của thành phần đã được cộng dồn thêm 20 px .

padding-right

Cấu trúc: padding-right: giá trị;

Ta thêm nội dung CSS tại thẻ đoạn code padding-right với giá trị 20 px :

* 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 dùng padding-right: 20px;

Thành phần có dùng thuộc tính padding .

Phân tích:

Nhìn vào tốt nhất ta thấy : chiều rộng hiện tại của thành phần không còn là 400 px như bắt đầu, mà được cộng dồn thêm 20 px, tổng chiều rộng hiện tại của thành phần chính là 420 px. Để thêm padding-right mà vẫn giữ nguyên chiều rộng như khởi đầu ta cần giảm chiều rộng chỉ bằng khoảng chừng padding-right, xem thí 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ó dùng thuộc tính padding .

Phân tích:

padding-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ị 20 px :

* 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 dùng padding-bottom: 20px;

Thành phần có dùng thuộc tính padding .

Phân tích:

Nhìn vào hiệu quả ta thấy : chiều cao hiện tại của thành phần được cộng dồn thêm 20 px .

padding-left

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ị 20 px :

* 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 dùng padding-left: 20px;

Thành phần có 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à 420 px, nếu muốn dùng padding-left mà chiều rộng không đổi khác, ta cần giảm chiều rộng chỉ bằng với khoảng chừ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ệt

Thành phần có dùng thuộc tính padding .

Phân tích:

padding với 4 giá trị

Cấu trúc: padding: top right bottom left;

Đây là dạng tích hợp của 4 thuộc tính padding : padding-top, padding-right, padding-bottom , và padding-left, trong đó :

top: chính là giá trị của padding-topright: chính là giá trị của padding-rightbottom: chính là giá trị của padding-bottomleft: là giá trị của padding-left

Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị lần lượt là 20 px 30 px 40 px 20 px :

* 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 dùng padding: 20px 30px 40px 20px;

Thành phần có 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, đơn cử chính là chiều rộng hiện tại của thành phần là 450 px, chiều cao hiện tại của thành phần được cộng thêm 60 px. Muốn giữ nguyên chiều rộng hay chiều cao như bắt đầu ta chỉ cần giảm chiều rộng hoặc chiều cao chỉ bằng khoảng chừng padding được thêm vào, xem ví dụ 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ệt

Thành phần có dùng thuộc tính padding .

Phân tích:

padding với 3 giá trị

Cấu trúc: padding: top [left right] bottom;

Đây chính là dạng tích 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ị, tất cả chúng ta dùng dạng này trong trường hợp padding-left , padding-right có cùng giá trị, trong đó :

top: là giá trị của padding-top[left right]: chính là giá trị chung của padding-left và padding-rightbottom: chính là giá trị của padding-bottom

Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị lần lượt là 20 px 30 px 40 px :

* 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 dùng padding: 20px 30px 40px;

Thành phần có 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à 460 px, chiều cao hiện tại của thành phần cũng được cộng dồn thêm 20 px của padding-top , và 40 px của padding-bottom. Muốn thêm padding mà vẫn giữ nguyên chiều rộng hay là chiều cao như bắt đầu ta chỉ cần giảm chiều rộng hoặc chiều cao chỉ bằng khoảng chừng padding được thêm vào, xem thí dụ 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ệt

Thành phần có dùng thuộc tính padding .

Phân tích:

padding với 2 giá trị

Cấu trúc: padding: [top bottom] [left right];

Đây chính là dạng phối 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ị, tất cả chúng ta 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 đó :

[top bottom]: chính là giá trị chung của padding-top và padding-bottom[left right]: là giá trị chung của padding-left , và padding-right

Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị lần lượt là 20 px 30 px :

* 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 dùng padding: 20px 30px;

Thành phần có 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 chính là 460 px, chiều cao hiện tại của thành phần cũng đã được cộng dồn thêm 40 px 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ư khởi đầu ta chỉ cần giảm chiều rộng hoặc chiều cao bằng khoảng chừng padding đã được thêm vào, xem ví dụ 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ệt

Thành phần có 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];

Đây là dạng phối 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 những thuộc tính của padding, tất cả mọi người 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 , padding-bottom

Ta thêm nội dung CSS tại thẻ đoạn code padding với giá trị là 30 px :

* margin: 0; padding: 0; div border: 1px solid red; p background: yellow; padding: 30px; width: 400px;

Hiển thị trình duyệt khi dùng padding: 30px;

Thành phần có 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à 460 px, chiều cao hiện tại của thành phần cũng đã được cộng dồn thêm 60 px của padding-top và padding-bottom. Để thêm padding mà vẫn giữ nguyên chiều rộng hay là chiều cao như bắt đầu ta chỉ cần giảm chiều rộng hoặc chiều cao chỉ bằng khoảng chừng padding đã được thêm vào, xem thí dụ 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ệt

Thành phần có dùng thuộc tính padding .

Phân tích:

Kết hợp dạng tổng quát , dạng cơ bản

Cấu trúc: padding: giá trị tổng quát; padding-vị trí: giá trị;

Đây chính là dạng dùng dạng cơ bản sau khi đã dùng dạng tổng quát, mục tiêu muốn kiểm soát , điều chỉnh lại giá trị cơ bản nào đó, xem thí 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ị chính là 20 px 30 px 40 px :

* 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 dùng padding: 20px 30px 40px;

Thành phần có dùng thuộc tính padding .

Phân tích:

Bây giờ ta sẽ dùng thuộc tính cơ bản padding-left : 10 px ; để kiểm soát và đ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ệt

Thành phần có dùng thuộc tính padding.

” Pad Là Gì ? Nghĩa Của Từ Pads Trong Tiếng Việt Pad Là Gì, Nghĩa Của Từ Pad

Phân tích: