Làm cách nào để tạo phần đệm trong CSS?

Đệm CSS cho phép một bộ mã hóa HTML đặt phần đệm mặc định hoặc không gian chết bên ngoài phần tử HTML.Lợi ích của việc làm điều này là nó tiết kiệm mã hóa khỏi việc lặp lại mã đệm đó cho từng phiên bản của phần tử đó và dễ dàng tạo ra tính nhất quán trên trang.Phần tử HTML được đệm có thể là bất kỳ số lượng nào, chẳng hạn như một đoạn văn, bảng hoặc tiêu đề. Để tạo phần đệm trong CSS, trước tiên bạn phải xác định phần tử HTML mà bạn muốn đệm.Yếu tố này mà bạn muốn pad được gọi là bộ chọn.Sau đó, bạn sẽ muốn chỉ định các giá trị đệm thích hợp.Có năm loại thuộc tính đệm khác nhau trong CSS MDASH;một cho cả bốn mặt của một phần tử cùng một lúc và bốn phần khác cho mỗi phía riêng lẻ của phần tử (ví dụ: phía bên trái, phía bên phải, phía trên cùng hoặc phía dưới).Một thuộc tính cho phép lập trình viên chỉ định các giá trị cho cả bốn cạnh của phần tử HTML cùng một lúc được gọi là thuộc tính tốc ký

.Ngôn ngữ mã hóa được sử dụng để chỉ định một tuyên bố của phần đệm CSS chỉ đơn giản là từ đệm.Theo nhãn đó, là các giá trị liên quan của phần đệm, hoặc, thông tin về lượng không gian mong muốn, thường được thể hiện bằng pixel hoặc tỷ lệ phần trăm.Phần đệm và các giá trị được viết bên trong niềng răng xoăn hoặc dấu ngoặc xoăn (tức là, {và}).Trước đó là phần tử HTML được đệm (ví dụ: P cho đoạn văn hoặc H2 cho các tiêu đề cấp 2). Về cách biểu diễn giá trị, các giá trị có thể được biểu diễn bằng pixel (ví dụ: 1px hoặc 5px), các điểm (ví dụ: 1pt hoặc 5pt) hoặc inch (ví dụ: 1in hoặc 5in) hoặc centimet (ví dụ: 1cm hoặc 5cm).Các giá trị cũng có thể được khai báo là phần trăm của phần tử HTML được tạo kiểu.Ví dụ, nếu giá trị là 50%, phần đệm sẽ bằng một nửa kích thước của phần tử. Các ví dụ sau, là mã HTML để đệm phần tử HTML bằng cách của các giá trị được phản ánh trong tỷ lệ phần trăm và độ dài, tương ứng.Nếu chỉ có một giá trị được gán, thì trình duyệt web sẽ gán phần đệm này cho cả bốn cạnh của phần tử HTML.Padding: 10%; Padding: 100px; Thêm nhiều giá trị hơn vào loại khai báo đệm ở trên sẽ khiến các trình duyệt web diễn giải chúng theo một cách nhất định.Nếu hai giá trị được gán, giá trị thứ nhất sẽ tương ứng với trên cùng và dưới cùng, trong khi giá trị thứ hai tương ứng với bên trái và phải.Ba giá trị sẽ khiến cho đầu tiên đề cập đến đỉnh, thứ hai sang bên trái và bên phải và thứ ba xuống dưới cùng của phần tử HTML.Việc gán tối đa bốn giá trị gây ra các giá trị thứ nhất, thứ hai, thứ ba và thứ tư tương ứng với phần trên, bên phải, dưới và bên trái của phần tử HTML, theo thứ tự đó.Khi có nhiều giá trị được cung cấp, chúng nên được phân tách bằng không gian và kết thúc bằng một đại hội, ví dụ: padding: 10px 20px 10px 20px;

padding trong CSS cũng có thể được thực hiện một bên.Về vấn đề này, có bốn thuộc tính đệm nữa có sẵn.Đây là những phần đệm, phần đệm, đáy đệm, và phần đệm-bên trái.Để tạo phần đệm trong CSS theo cách chính xác hơn này, bạn sẽ cần dán nhãn các thuộc tính có cùng cú pháp với các tuyên bố tốc ký như trên.Mỗi thuộc tính đệm này chỉ có một giá trị theo chiều dài hoặc tỷ lệ phần trăm.Ví dụ: padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px; padding-left: 20px;

Mã sau đây tạo một trang web, khai báo các thuộc tính đệm giữaSau đó sử dụng chúng trong một phần tử đoạn được chỉ định bởi thẻ p.Văn bản giữa/ * và */là ghi chú để giải thích loại đệm được sử dụng và sẽ không được đưa vào mã đệm CSS.

p.example1 {padding: 10px;} /* đệm tay ngắn cho cả bốn cạnh* /p.example2 {padding: 50px 30px;và phải * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px; padding-left: 20px;
} / * đệm cá nhân.*/
lt;/style gt;
lt;/head gt;Phần đệm ở mỗi bên là 10px. Lt;/p gt;' Ví dụ3, gt; Văn bản này có phần đệm hàng đầu là 10px, một phần đệm bên phải 20px, phần đệm dưới cùng là 10px và phần đệm bên trái là 20px. Lt;/p gt;
lt;/body gt;; Trong ví dụ trên, ví dụ1, Hồi, v.v., là các tên được gán cho một lớp, sau đó được tham chiếu trong các đoạn văn.Khoảng thời gian giữa thẻ P và tên lớp ở đầu mã biểu thị một tuyên bố của một lớp được gán cho một đoạn văn.Lưu ý niềng răng sau khi khai báo lớp bao quanh các phân công giá trị thuộc tính đệm.Mặc dù điều này có vẻ như rất nhiều công việc, nhưng nó ít tốn công sức hơn nhiều so với chỉ định đệm cho từng đoạn riêng lẻ.Bạn có thể khai báo một thuộc tính đệm cho phần tử mong muốn, trong ví dụ trên là thẻ P, sau đó tham chiếu lớp khi bạn sử dụng phần tử giữa các thẻ cơ thể của trang.Nếu chỉ cần một loại đệm cho tất cả các đoạn văn, bạn không cần phải sử dụng các lớp học.Chỉ cần sử dụng mã sau giữa các thẻ kiểu, sau đó mã hóa các đoạn mà không cần chỉ định bất kỳ lớp nào.Mã này sẽ đi giữa các thẻ cơ thể thay vì mã trong ví dụ trên. P {Padding: 10px 20px 10px 20px;}

Điều này sẽ tạo ra tất cả các đoạn mặc dù không có lớp được chỉ định.