Thông thường, để chỉ định kích thước của thụt lề trong trang HTML, các khả năng của ngôn ngữ CSS (Trang tính kiểu xếp tầng) được sử dụng. Mặc dù trong bản thân ngôn ngữ HTML có một số phần còn lại "thô sơ", cho phép trong một số trường hợp thiết lập thụt lề. Dưới đây là các tùy chọn được sử dụng thường xuyên nhất, nhưng bên cạnh chúng vẫn còn khá nhiều loại thủ thuật khác nhau cho phép bạn thiết lập thụt lề để đánh dấu tài liệu HTML không chuẩn.
Nó là cần thiết
Kiến thức cơ bản về ngôn ngữ HTML và CSS
Hướng dẫn
Bước 1
Xác định phần tử trang để thụt lề. Ví dụ: nếu văn bản được đặt bên trong thẻ … (khối), thì khối này sẽ là phần tử mẹ cho văn bản này và thụt lề phải được tính từ các đường viền của khối. Và nếu văn bản (hoặc hình ảnh) không nằm trong bất kỳ phần tử khối nào (div, li, v.v.) hoặc nội dòng (span, p, v.v.), thì cha của nó sẽ là phần thân tài liệu (thẻ nội dung). Việc xác định một phần tử mẹ cho văn bản là cần thiết vì chính anh ta là người cần thiết lập các mô tả của các kiểu tạo thành các thụt lề. Giả sử rằng văn bản của bạn được đặt bên trong một khối div:
Bước 2
Sử dụng thuộc tính lề của ngôn ngữ CSS để đặt lề, nghĩa là khoảng cách từ đường viền của một phần tử đến các phần tử liền kề, cũng như đến các đường viền của phần tử mẹ. Khoảng cách này có thể được đặt riêng cho phần đệm ở mỗi bên: margin-top - trên cùng, margin-right - ở bên phải, margin-bottom - ở dưới cùng, margin-left - ở bên trái. Đối với ví dụ ở trên, mã css này có thể giống như sau: div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 40px;
lề trái: 70px;
} Ở đây "div" là một bộ chọn chỉ định rằng kiểu này nên được áp dụng cho tất cả các div trong mã tài liệu. Cú pháp CSS cho phép bạn kết hợp tất cả bốn dòng thành một: div {
lề: 10px 15px 40px 70px;
} Giá trị của các thụt lề phải luôn được chỉ định theo thứ tự sau: đầu tiên - ở trên cùng, sau đó - ở bên phải, dưới cùng và bên trái. Nếu các thụt lề giống nhau ở tất cả các bên, thì chỉ cần xác định giá trị là đủ một lần: div {
lề: 70px;
} Ngoài ra, bạn có thể đặt lề ngang nổi (nghĩa là trái và phải). Điều này có thể rất hữu ích khi bạn cần đặt chính xác một khối có chiều rộng nhất định ở giữa cửa sổ trình duyệt. Bản thân trình duyệt sẽ tự động xác định mức độ thụt lề phải ở cả hai bên, nếu bạn viết câu lệnh CSS sau: div {
margin: 0 auto;
}
Bước 3
Sử dụng thuộc tính padding để đặt padding, là khoảng cách từ đường viền của một phần tử đến bất kỳ phần tử nào được đặt bên trong nó, bao gồm cả văn bản. Cú pháp của thuộc tính này hoàn toàn giống với thuộc tính margin: div {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 40px;
padding-left: 70px;
} Hoặc div {
đệm: 10px 15px 40px 70px;
}
Bước 4
Sử dụng thuộc tính text-indent để đặt thụt lề bổ sung cho dòng đầu tiên của mỗi đoạn văn bản. Ví dụ: div {
text-thụt lề: 80px;
}
Bước 5
Sử dụng thuộc tính hspace và vspace của thẻ HTML img để đặt thụt lề ngang và dọc từ hình ảnh đến các phần tử bên ngoài tương ứng. Ví dụ, như thế này:
Bước 6
Sử dụng thuộc tính cellpadding của thẻ bảng nếu bạn cần đặt thụt lề từ đường viền của các ô trong bảng thành nội dung của chúng. Và thuộc tính cellspacing đặt khoảng cách giữa các ô trong bảng. Ví dụ:
| 1 | 2 |
