CSS

Phần đệm

Padding được sử dụng để tạo khoảng trống xung quanh nội dung của phần tử, bên trong bất kỳ đường viền xác định nào.

Phần tử này có phần đệm là 70px.

Hãy tự mình thử »

CSS Padding

Thuộc tính CSS padding được sử dụng để tạo khoảng trống xung quanh
nội dung của phần tử, bên trong bất kỳ đường viền xác định nào.

Với CSS, bạn có toàn quyền kiểm soát phần đệm. Có tài sản
để đặt phần đệm cho mỗi bên của phần tử (trên cùng, bên phải, dưới cùng và bên trái).

Padding – Các mặt riêng lẻ

CSS có các thuộc tính để chỉ định phần đệm cho mỗi
bên của một phần tử:

• padding-top
• padding-right
• padding-bottom
• padding-left

Tất cả các thuộc tính đệm có thể có các giá trị sau:

• chiều dài – chỉ định một khoảng đệm bằng px, pt, cm, v.v.
• % – chỉ định một khoảng đệm tính bằng% chiều rộng của phần tử chứa
• inherit – chỉ định rằng phần đệm phải được kế thừa từ phần tử mẹ

Lưu ý: Không cho phép các giá trị âm.

Ví dụ

Đặt các khoảng đệm khác nhau cho tất cả bốn cạnh của & lt; div & gt; phần tử:

div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}

Hãy tự mình thử »

Padding – Thuộc tính tốc ký

Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính đệm trong
một tài sản.

Thuộc tính padding là thuộc tính viết tắt cho cá nhân sau
thuộc tính đệm:

• padding-top
• padding-right
• padding-bottom
• padding-left

Đây là cách nó hoạt động:

Nếu thuộc tính padding có bốn giá trị:

• đệm: 25px 50px 75px 100px;
  • phần đệm trên cùng là 25px
  • phần đệm bên phải là 50px
  • phần đệm dưới cùng là 75px
  • phần đệm bên trái là 100px

Ví dụ

Sử dụng thuộc tính viết tắt padding với bốn giá trị:

div {
padding: 25px 50px 75px 100px;
}

Hãy tự mình thử »

Nếu thuộc tính padding có ba giá trị:

• padding: 25px 50px 75px;
  • phần đệm trên cùng là 25px
  • phần đệm bên phải và bên trái là 50px
  • phần đệm dưới cùng là 75px

Ví dụ

Sử dụng thuộc tính viết tắt padding với ba giá trị:

div {
padding: 25px 50px 75px;
}

Hãy tự mình thử »

Nếu thuộc tính padding có hai giá trị:

• đệm: 25px 50px;
  • đệm trên và dưới là 25px
  • phần đệm bên phải và bên trái là 50px

Ví dụ

Sử dụng thuộc tính viết tắt padding với hai giá trị:

div {
padding: 25px 50px;
}

Hãy tự mình thử »

Nếu thuộc tính padding có một giá trị:

• padding: 25px;
  • cả bốn padding đều là 25px

Ví dụ

Sử dụng thuộc tính viết tắt padding với một giá trị:

div {
padding: 25px;
}

Hãy tự mình thử »

Phần đệm và chiều rộng phần tử

Thuộc tính CSS width chỉ định chiều rộng của vùng nội dung của phần tử. Các
vùng nội dung là phần bên trong phần đệm, đường viền và lề của một phần tử
( mô hình hộp ).

Vì vậy, nếu một phần tử có chiều rộng được chỉ định, phần đệm được thêm vào phần tử đó sẽ
được thêm vào tổng chiều rộng của phần tử. Đây thường là một kết quả không mong muốn.

Ví dụ

Đây, & lt; div & gt; phần tử có chiều rộng là 300px.
Tuy nhiên, chiều rộng thực tế của & lt; div & gt; phần tử sẽ là 350px (300px +
25px đệm bên trái + 25px đệm phải):

div {
width: 300px;
padding: 25px;
}

Hãy tự mình thử »

Để giữ chiều rộng ở mức 300px, bất kể số lượng đệm như thế nào, bạn có thể sử dụng
thuộc tính box-sizing . Điều này làm cho phần tử duy trì chiều rộng thực của nó; nếu
bạn tăng khoảng đệm, không gian nội dung có sẵn sẽ giảm xuống.

Ví dụ

Sử dụng thuộc tính box-sizing để giữ chiều rộng ở 300px, bất kể
số lượng đệm:

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

Hãy tự mình thử »

Các ví dụ khác

Đặt phần đệm bên trái
Ví dụ này trình bày cách đặt phần đệm bên trái của & lt; p & gt; phần tử.

Đặt đúng phần đệm
Ví dụ này trình bày cách đặt phần đệm phù hợp của & lt; p & gt; phần tử.

Đặt phần đệm trên cùng
Ví dụ này trình bày cách đặt phần đệm trên cùng của & lt; p & gt; phần tử.

Đặt phần đệm dưới cùng
Ví dụ này trình bày cách đặt phần đệm dưới cùng của & lt; p & gt; phần tử.

Tự kiểm tra bằng các bài tập

Bài tập:

Đặt phần đệm trên cùng của & lt; h1 & gt; thành 30 pixel.

& lt; phong cách & gt;
h1 {
  : 30px;
}
& lt; / style & gt;

& lt; body & gt;
  & lt; h1 & gt; Đây là tiêu đề & lt; / h1 & gt;
  & lt; p & gt; Đây là đoạn văn & lt; / p & gt;
  & lt; p & gt; Đây là đoạn văn & lt; / p & gt;
& lt; / body & gt;

Bắt đầu bài tập

Tất cả các thuộc tính CSS Padding

Tài sản
Sự mô tả

đệm
Thuộc tính viết tắt để đặt tất cả các thuộc tính đệm trong một khai báo

padding-bottom
Đặt phần đệm dưới cùng của một phần tử

padding-left
Đặt phần đệm bên trái của một phần tử

padding-right
Đặt phần đệm bên phải của một phần tử

padding-top
Đặt phần đệm trên cùng của một phần tử