Hướng dẫn how do you put a space in html? - làm thế nào để bạn đặt một khoảng trống trong html?

Mặc dù HTML có xu hướng là một ngôn ngữ khá trực quan để chọn, đôi khi nó hành động theo cách người mới bắt đầu có thể không mong đợi. Ví dụ: làm thế nào để bạn thêm nhiều hơn một khoảng trống giữa hai từ hoặc ký tự trong HTML?

Đơn giản chỉ cần tiếp tục nhấn SpaceBar và bạn đã hoàn thành! Cảm ơn vì đã đọc.

Đùa thôi, có nhiều hơn một chút về nó. Nếu bạn muốn thêm nhiều không gian liền kề trong HTML, hãy nhấn vào SpaceBar liên tục giành được công việc của Google như trong một tài liệu văn bản đơn giản. Nếu bạn làm điều này trong HTML, trình duyệt sẽ ngưng tụ các không gian bạn thêm xuống chỉ một:

Xem ví dụ về sự sụp đổ không gian trắng của Christina Perricone (@HubSpot) trên Codepen.

Hành vi này được gọi là sự sụp đổ của khoảng trắng - Trình duyệt sẽ hiển thị nhiều không gian HTML dưới dạng một không gian và cũng sẽ bỏ qua các không gian trước và sau các yếu tố và bên ngoài các phần tử.

Mặc dù quy tắc này đôi khi bất tiện, có một vài cách giải quyết mà các lập trình viên HTML mới bắt đầu nên biết. Trong bài đăng này, chúng tôi sẽ hiển thị bốn cách nhanh chóng của bạn để đặt thêm không gian vào tài liệu HTML của bạn, cộng với một số mẹo về việc thêm khoảng cách với CSS.

Cách chèn một không gian trong HTML

HTML xử lý nội dung của một trang web. Nếu nội dung của bạn yêu cầu khoảng cách thêm để có ý nghĩa, bạn có thể thử bất kỳ phương thức nào dưới đây.

Tuy nhiên, nếu bạn muốn thêm không gian cho mục đích tạo kiểu (ví dụ, khoảng trắng giữa các yếu tố), chúng tôi khuyên bạn nên sử dụng CSS thay thế - chuyển sang phần tiếp theo để tìm hiểu làm thế nào.

Không gian không phá vỡ HTML (& NBSP;)

Cách đơn giản nhất để thêm một không gian trong HTML (bên cạnh việc đánh vào vũ trụ) là với thực thể không gian không phá vỡ, được viết AS & NBSP; hoặc   ;. Nhiều không gian không phá vỡ liền kề won đã bị thu gọn bởi trình duyệt, cho phép bạn lực lượng mạnh mẽ, một số không gian có thể nhìn thấy giữa các từ hoặc các yếu tố trang khác.  or  . Multiple adjacent non-breaking spaces won’t be collapsed by the browser, letting you “force” several visible spaces between words or other page elements.

Xem không gian HTML PEN: Ví dụ NBSP của Christina Perricone (@HubSpot) trên Codepen.

Khi được hiển thị trong trình duyệt, một không gian không phá vỡ sẽ trông giống như một không gian bình thường. Sự khác biệt duy nhất là không gian này sẽ không bao giờ phá vỡ một dòng mới - hai từ hoặc phần tử được phân tách bởi & nbsp; & nbsp; sẽ luôn xuất hiện trên cùng một dòng. Điều này rất hữu ích nếu việc chia hai đoạn văn bản sẽ gây nhầm lẫn cho người đọc, chẳng hạn như trong trường hợp của 9: 00 & nbsp; am, hoặc 1 & nbsp; 000 & nbsp; 000.  will always appear on the same line. This is useful if splitting two pieces of text would be confusing for the reader, such as in the case of “9:00 AM” or “1 000 000.”

Cuối cùng, bạn có thể sử dụng các thực thể HTML bổ sung & Ensp; và & emsp; Để thêm hai và bốn không gian không phá vỡ tương ứng:  and   to add two and four non-breaking spaces respectively:

Xem không gian HTML Pen: Ví dụ về Ensp và EMSP của Christina Perricone (@HubSpot) trên Codepen.

Trong khi & nbsp; Có thể có ích, nó không nên được sử dụng quá mức, vì việc tránh bị vỡ dòng có thể gây ra vấn đề với việc hiển thị nội dung trong trình duyệt. Ngoài ra, tránh sử dụng một không gian không phá vỡ vì lý do kiểu dáng, như thụt lề hoặc tập trung một yếu tố trên một trang-nên xử lý kiểu dáng bằng CSS.  can come in handy, it shouldn’t be used excessively, since avoiding line breaks may cause problems with rendering the content in the browser. Also, avoid using a non-breaking space for styling reasons, like indenting or centering an element on a page — styling should be handled with CSS.

Tìm hiểu thêm: Hướng dẫn của người mới bắt đầu về HTML & CSS

Bạn muốn tìm hiểu thêm về HTML? Tải xuống Hướng dẫn miễn phí của chúng tôi cho các thực tiễn tốt nhất để bắt đầu với HTML. & NBSP;

HTML Preformatted Text () Tag

Một cách khác để ngăn không gian HTML của bạn sụp đổ là bằng cách tạo thành văn bản HTML của bạn, giữ lại tất cả các không gian và ngắt dòng trong HTML của bạn. Khi HTML được hiển thị trong trình duyệt, văn bản sẽ trông giống như trong tệp HTML. Preformatted rất hữu ích cho nội dung văn bản với một thành phần trực quan, như thơ hoặc nghệ thuật ASCII.

Để tạo thành văn bản của bạn, hãy đặt nó bên trong một thẻ:

 tag:
Xem không gian HTML bút: Ví dụ trước của Christina Perricone (@HubSpot) trên Codepen.
Lưu ý rằng các trình duyệt web áp dụng một phông chữ đơn lẻ vào văn bản bên trong các thẻ, nhưng bạn có thể dễ dàng ghi đè này với thuộc tính gia đình phông chữ CSS.
 tags, but you can easily override this with
the CSS font-family property.
Thẻ html break ()
Nếu bạn muốn ngăn chặn một dòng phá vỡ giữa hai từ, hãy sử dụng một không gian không phá vỡ. Nếu bạn muốn chèn một ngắt dòng, hãy sử dụng thẻ break html, được viết là. Bạn không cần một thẻ đóng ở đây - chỉ cần viết thêm một lần phá vỡ dòng.
. You don’t need a closing tag here — just writing 
 adds a line break.



Thẻ Break rất hữu ích cho các trường hợp cần phá vỡ dòng để hiểu nội dung, nhưng khi bạn không muốn sử dụng một phần tử đoạn mới, chẳng hạn như trong một địa chỉ:
Xem Bút HTML Không gian: BR Ví dụ của Christina Perricone (@HubSpot) trên Codepen.
Thẻ Break có nghĩa là cho các lần ngắt dòng đơn, và không quá một liên tiếp. Nếu bạn muốn thêm khoảng trắng bổ sung giữa các đoạn văn bản, hãy sử dụng phần đệm CSS và lề thay thế cho mã sạch hơn. Hoặc, bạn có thể sử dụng thẻ HTML, như chúng ta sẽ thấy tiếp theo.
 tag, as we’ll
see next.
Thẻ html paragraph ()
Yếu tố này là một trong những yếu tố đầu tiên bạn học như một người mới bắt đầu và vì lý do chính đáng. Thẻ biểu thị một đoạn văn trong HTML, vì vậy nó hiển thị ở mọi nơi.
 element is one of the first you’ll learn as a beginner, and for good reason. The 
 tag denotes a paragraph in HTML, so it shows up everywhere.
 là một phần tử cấp khối, có nghĩa là (1) chiều rộng mặc định của nó được đặt thành chiều rộng của toàn bộ trang và (2) có một mức ngắt dòng trước và sau phần tử khối. Với, các trình duyệt sẽ thêm một số khoảng trắng bổ sung với độ ngắt dòng này để làm cho các đoạn liên tiếp dễ đọc hơn, vì vậy nó có thể được sử dụng bất cứ khi nào bạn sử dụng các khối văn bản khác biệt với nhau. is a block-level element, which means that (1) its default width is set to the width of the entire page, and (2) there is a line break before and after the block element. With 
, browsers
will add some extra whitespace with this line break to make consecutive paragraphs more readable, so it can be used any time you’re using blocks of text that are distinct from each other.
Xem Bút HTML Không gian: P Ví dụ của Christina Perricone (@HubSpot) trên Codepen.
Phần tử cũng có lợi ích là một yếu tố HTML ngữ nghĩa. Điều này có nghĩa là bản thân thẻ chỉ ra những gì phần tử làm (tức là, thẻ đoạn biểu thị một đoạn văn bản), giúp nội dung của bạn dễ dàng truy cập hơn đối với các công nghệ hỗ trợ & nbsp; và giúp tìm kiếm các công cụ tốt hơn để lập chỉ mục trang web của bạn tốt hơn.
 element also has the benefit of being a semantic HTML element. This means that the tag itself indicates what the element does (i.e., the paragraph tag denotes a paragraph of text), which
makes your content more accessible for assistive technologies and helps search engines better index your web page.
 
Cách chèn một khoảng trống trong CSS
Để đặt các không gian có liên quan nhiều đến kiểu dáng của trang của bạn hơn là nội dung, hãy sử dụng các bảng kiểu xếp tầng (CSS). Với CSS, bạn có thể áp dụng và thay đổi các quy tắc kiểu dáng toàn trang và toàn bộ chỉ với một hoặc hai thay đổi quy tắc nhỏ, thay vì thay đổi từng trường hợp trong HTML của bạn-& NBSP; chỉ cần đảm bảo rằng bạn sẽ thêm CSS bên ngoài.
Dưới đây là một số cách sử dụng tiện dụng của CSS để thêm khoảng cách giữa nội dung của bạn.
CSS văn bản-suy nghĩ
Nếu bạn muốn đặt một thụt vào dòng đầu tiên của một phần tử khối như, hãy sử dụng thuộc tính CSS văn bản. Ví dụ: để thêm một thụt lề của 4 không gian, áp dụng văn bản quy tắc-ellent: 4em; đến phần tử. Bạn cũng có thể sử dụng một đơn vị chiều dài khác như PX hoặc CM hoặc đặt thụt vào phần trăm của chiều rộng trang:
, use the CSS text-indent property. For example, to add an indent of 4 spaces, apply the rule text-indent: 4em; to the element. You can also use a different length unit like px or cm, or set the indent as a percentage of the page width:
Xem không gian HTML Pen: Ví dụ về văn bản của Christina Perricone (@HubSpot) trên Codepen.
Bằng cách sử dụng kỹ thuật này, bạn có thể nhanh chóng kéo dài hoặc rút ngắn tất cả các vết lõm của mình bằng cách thay đổi giá trị của văn bản. Điều này dễ dàng hơn nhiều so với việc thêm hoặc loại bỏ nhiều trường hợp & nbsp; cho mỗi đoạn văn thụt lề.text-indent. This is much easier than adding or removing multiple instances of   for every indented paragraph.



CSS văn bản-Align
Thay vì sử dụng các không gian HTML để căn chỉnh văn bản của bạn theo một cách nhất định, hãy chọn giải pháp sạch hơn nhiều của thuộc tính CSS Text-Align. Với thuộc tính này, bạn có thể căn chỉnh văn bản bên trong một phần tử khối bên trái hoặc bên phải, cũng như trung tâm hoặc biện minh cho văn bản.
Xem không gian HTML Pen: Ví dụ về văn bản của Christina Perricone (@HubSpot) trên Codepen.
Lề và đệm
Mỗi phần tử HTML có thể được đưa ra lề và đệm, như được minh họa bằng mô hình hộp CSS:
Để thêm khoảng trắng bên ngoài đường viền phần tử, chúng ta có thể điều chỉnh giá trị ký quỹ của nó trong CSS. Đối với khoảng cách bên trong đường viền, chúng ta có thể thay đổi giá trị đệm của nó cho một hiệu ứng tương tự. Cả hai đều được thể hiện dưới đây:margin value
in CSS. For spacing inside a border, we can alter its padding value for a similar effect. Both are demonstrated below:
Xem không gian Pen HTML: Lợi nhuận và đệm của Christina Perricone (@HubSpot) trên Codepen.
Thêm không gian bổ sung trong HTML
Đôi khi sụp đổ khoảng trắng có thể gây khó chịu nhẹ. May mắn thay, có một số cách để đi xung quanh nó và biết yếu tố hoặc quy tắc tốt nhất cho mỗi trường hợp sẽ có ích khi bạn bắt đầu xây dựng các trang web đầy đủ.
Như một lời nhắc cuối cùng, hãy chắc chắn sử dụng các thủ thuật trắng HTML cho nội dung của bạn (ví dụ: không gian giữa các từ hoặc dòng đơn) và CSS để tạo kiểu cho mọi thứ khác.