Một cách nhìn vào khoảng trắng trong HTML được xử lý bởi trình duyệt
Nếu bạn là một nhà thiết kế web bắt đầu, một trong nhiều điều bạn sẽ phải hiểu sớm là cách mà không gian trắng trong mã của trang web được xử lý bởi trình duyệt web.
Thật không may, cách mà các trình duyệt xử lý không gian trắng không trực quan lắm, đặc biệt nếu bạn vào HTML và so sánh nó với cách xử lý không gian trắng trong các chương trình xử lý văn bản, bạn có thể quen với nó hơn.
Trong phần mềm xử lý văn bản, bạn có thể thêm nhiều khoảng trống hoặc tab trong tài liệu và khoảng cách đó sẽ được phản ánh trong hiển thị nội dung của tài liệu. Đây không phải là trường hợp với HTML hoặc với các trang web. Như vậy, việc học cách không gian trắng thực sự được xử lý bởi trình duyệt web là rất quan trọng.
Khoảng cách trong in
Trong phần mềm xử lý văn bản, ba ký tự trắng chính là khoảng trống, tab, và dấu xuống dòng. Mỗi hành động này theo một cách riêng biệt, nhưng trong HTML, các trình duyệt hiển thị tất cả về cơ bản giống nhau. Cho dù bạn đặt một dấu cách hay 100 dấu cách trong đánh dấu HTML hay trộn khoảng trắng với các tab và dấu xuống dòng, tất cả các dấu cách này sẽ được cô đặc xuống một khoảng trống khi trang được hiển thị bởi trình duyệt. Trong thuật ngữ thiết kế web, điều này được gọi là sự sụp đổ không gian màu trắng. Bạn không thể sử dụng các phím khoảng trắng điển hình này để thêm khoảng trống trong trang web vì trình duyệt thu hẹp nhiều không gian chỉ vào một khoảng trống khi được hiển thị trong trình duyệt,
Tại sao người nào đó sử dụng tab?
Thông thường, khi mọi người sử dụng các tab trong tài liệu văn bản, họ đang sử dụng chúng vì lý do bố cục hoặc để văn bản di chuyển đến một địa điểm nhất định hoặc là một khoảng cách nhất định từ một phần tử khác. Trong thiết kế web, bạn không thể sử dụng các ký tự khoảng trống nói trên để đạt được các kiểu trực quan hoặc nhu cầu bố cục đó.
Trong thiết kế web, việc sử dụng các ký tự khoảng trắng thừa trong mã sẽ hoàn toàn dễ đọc mã đó. Các nhà thiết kế và nhà phát triển web thường sử dụng các tab để thụt lề mã để họ có thể thấy các phần tử nào là con của các phần tử khác - nhưng các thụt lề đó không ảnh hưởng đến bố cục trực quan của trang đó. Đối với những thay đổi bố cục trực quan cần thiết, bạn sẽ cần phải chuyển sang CSS (bảng định kiểu xếp tầng).
Sử dụng CSS để tạo các tab và khoảng cách HTML
Các trang web ngày nay được xây dựng với sự tách biệt về cấu trúc và phong cách. Cấu trúc của một trang được xử lý bởi HTML trong khi kiểu được quyết định bởi CSS. Điều này có nghĩa là để tạo khoảng cách hoặc đạt được một bố cục nhất định, bạn nên chuyển sang CSS và không cố gắng thêm các ký tự khoảng trắng vào mã HTML.
Nếu bạn đang cố gắng sử dụng các tab để tạo cột văn bản, thay vào đó bạn có thể sử dụng các phần tử
Nếu dữ liệu bạn đang đặt ra là dữ liệu dạng bảng, bạn có thể sử dụng các bảng để căn chỉnh dữ liệu đó theo ý muốn. Các bảng thường có một đoạn rap tồi trong thiết kế web vì chúng bị lạm dụng như các công cụ bố cục thuần túy trong nhiều năm, nhưng các bảng vẫn hoàn toàn hợp lệ nếu nội dung của bạn chứa dữ liệu bảng nói trên.
Lề, Đệm và Văn bản thụt lề
Cách phổ biến nhất để tạo khoảng cách với CSS là sử dụng một trong các kiểu CSS sau:
- lề
- đệm
- thụt lề văn bản
Ví dụ, bạn có thể thụt lề dòng đầu tiên của một đoạn như một tab với CSS sau đây (lưu ý rằng điều này giả định rằng đoạn của bạn có một thuộc tính lớp là "đầu tiên" gắn liền với nó):
p.first {
văn bản thụt lề: 5em;
}
Đoạn này bây giờ sẽ được thụt vào khoảng 5 ký tự.
Bạn cũng có thể sử dụng thuộc tính lề hoặc đệm trong CSS để thêm khoảng cách vào trên cùng, dưới cùng, bên trái hoặc bên phải (hoặc kết hợp các cạnh đó) của một phần tử. Cuối cùng, bạn có thể đạt được bất kỳ loại khoảng cách nào cần thiết bằng cách chuyển sang CSS.
Di chuyển văn bản nhiều hơn một không gian không có CSS
Nếu tất cả những gì bạn muốn là để văn bản của bạn được di chuyển nhiều hơn một khoảng cách ra khỏi mục trước, bạn có thể sử dụng không gian không phá vỡ.
Để sử dụng không gian không phá vỡ, bạn chỉ cần thêm & nbsp; bao nhiêu lần bạn cần nó trong đánh dấu HTML của bạn.
Ví dụ, nếu bạn muốn di chuyển từ của bạn năm không gian hơn, bạn có thể thêm sau đây trước từ.
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;HTML tôn trọng những điều này và sẽ không thu gọn chúng xuống một không gian duy nhất. Tuy nhiên, đây được coi là một thực hành rất nghèo vì nó đang thêm đánh dấu HTML thêm vào một tài liệu chỉ để đạt được nhu cầu bố trí. Nhắc lại việc tách cấu trúc và kiểu dáng đó, bạn nên tránh thêm các khoảng trống không phá vỡ đơn giản để đạt được hiệu ứng bố trí mong muốn và nên sử dụng lề CSS và đệm thay thế.