Tạo không gian và tách các phần tử trong HTML bằng CSS
Việc tạo không gian và phân tách vật lý các phần tử trong HTML có thể khó hiểu đối với nhà thiết kế web bắt đầu. Điều này là do HTML có thuộc tính được gọi là "thu gọn khoảng trắng". cho dù bạn nhập 1 dấu cách hay 100 trong mã HTML của mình, trình duyệt web sẽ tự động thu hẹp các khoảng trống đó xuống chỉ còn một dấu cách. Điều này khác với một chương trình như Microsoft Word , cho phép người tạo tài liệu thêm nhiều không gian để phân tách các từ và các phần tử khác của tài liệu đó.
Đây không phải là cách thiết kế trang web khoảng cách hoạt động.
Vì vậy, làm thế nào để bạn thêm khoảng trắng trong HTML hiển thị trên trang web ? Bài viết này xem xét một số cách khác nhau.
Các không gian bằng HTML với CSS
Cách ưa thích để thêm khoảng trắng trong HTML của bạn là với Cascading Style Sheets (CSS) . CSS nên được sử dụng để thêm bất kỳ khía cạnh trực quan nào của trang web và vì khoảng cách là một phần của đặc điểm thiết kế trực quan của một trang, CSS là nơi bạn muốn thực hiện việc này.
Trong CSS, bạn có thể sử dụng thuộc tính lề hoặc đệm để thêm khoảng trống xung quanh các phần tử. Ngoài ra, thuộc tính văn bản thụt lề thêm không gian vào phía trước của văn bản, chẳng hạn như cho các đoạn thụt lề.
Đây là một ví dụ về cách sử dụng CSS để thêm không gian trước tất cả các đoạn văn của bạn. Thêm CSS sau vào bảng kiểu bên ngoài hoặc bên trong của bạn:
p {
văn bản thụt lề: 3em;
}
Dấu cách trong HTML: Bên trong văn bản của bạn
Nếu bạn chỉ muốn thêm một hoặc hai khoảng trống vào văn bản của mình, bạn có thể sử dụng không gian không phá vỡ.
Nhân vật này hoạt động giống như một nhân vật không gian chuẩn, chỉ có nó không sụp đổ bên trong trình duyệt.
Dưới đây là ví dụ về cách thêm năm dấu cách bên trong một dòng văn bản:
Văn bản này có năm dấu cách bên trong nó
Sử dụng HTML:
Văn bản này có & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; năm khoảng trống bên trong nó
Bạn cũng có thể sử dụng thẻ
để thêm ngắt dòng phụ.
Câu này có năm ngắt dòng ở cuối của nó
Tại sao khoảng cách trong HTML là một ý tưởng tồi
Mặc dù các tùy chọn này đều hoạt động - phần tử không chia sẽ thực sự thêm khoảng cách vào văn bản của bạn và ngắt dòng sẽ thêm khoảng cách bên dưới đoạn được hiển thị ở trên - đây không phải là cách tốt nhất để tạo khoảng cách trong trang web của bạn. Việc thêm các phần tử này vào HTML của bạn sẽ thêm thông tin trực quan vào mã thay vì tách cấu trúc của một trang (HTML) khỏi các kiểu trực quan (CSS). Các phương pháp hay nhất quy định rằng những điều này nên tách biệt vì một số lý do, bao gồm dễ cập nhật trong tương lai và kích thước tệp cũng như hiệu suất trang tổng thể.
Nếu bạn sử dụng một biểu định kiểu bên ngoài để đọc tất cả các kiểu và khoảng trắng của mình, thì việc thay đổi các kiểu đó cho toàn bộ trang web là dễ dàng, vì bạn chỉ cần cập nhật một tờ kiểu đó.
Hãy xem xét ví dụ ở trên câu với năm thẻ
ở cuối câu. Nếu bạn muốn có khoảng cách đó ở cuối mỗi đoạn, bạn sẽ cần phải thêm mã HTML đó vào mỗi đoạn trong toàn bộ trang web của mình. Đó là một số tiền hợp lý của đánh dấu thêm mà sẽ sưng lên các trang của bạn.
Ngoài ra, nếu bạn quyết định con đường mà khoảng cách này là quá nhiều hoặc quá ít, và bạn muốn thay đổi nó một chút, bạn sẽ cần phải chỉnh sửa từng đoạn duy nhất trong toàn bộ trang web của bạn. Không cám ơn!
Thay vì thêm các phần tử khoảng cách này vào mã của bạn, hãy sử dụng CSS.
p {
padding-bottom: 20px;
}
Một dòng CSS sẽ thêm khoảng trắng bên dưới các đoạn của trang của bạn. Nếu bạn muốn thay đổi khoảng cách đó trong tương lai, hãy chỉnh sửa một dòng này (thay vì toàn bộ mã trang web của bạn) và bạn tốt để đi!
Bây giờ, nếu bạn cần thêm một dấu cách vào một phần của trang web của mình, việc sử dụng thẻ
hoặc một khoảng trắng không phá vỡ không phải là kết thúc của thế giới, nhưng bạn cần phải cẩn thận.
Việc sử dụng các tùy chọn khoảng cách HTML nội dòng này có thể là độ dốc trơn. Trong khi một hoặc hai có thể không làm tổn thương trang web của bạn, nếu bạn tiếp tục xuống con đường đó, bạn sẽ giới thiệu các vấn đề vào các trang của bạn. Cuối cùng, bạn nên chuyển sang CSS cho khoảng cách HTML và tất cả các nhu cầu hình ảnh khác của trang web.