Các trình duyệt theo mặc định sẽ tạo một khoảng cách nhất định giữa các dòng để đảm bảo rằng văn bản có thể đọc được dễ dàng. Ví dụ, đối với loại 12 điểm, trình duyệt sẽ đặt khoảng cách 1 điểm theo chiều dọc giữa các dòng. Khoảng cách giữa các dòng văn bản được gọi là hàng đầu, một thuật ngữ được kế thừa một cách lỏng lẻo từ xuất bản in

Chiều cao dòng sử dụng các đơn vị đo lường CSS tiêu chuẩn, giống như khoảng cách giữa các chữ cái. Bạn có thể chỉ định văn bản có 26 điểm dẫn đầu như thế này

Theo mặc định, các tài liệu được tạo bằng HTML được hiển thị ở định dạng một khoảng cách. Nếu bạn muốn giới thiệu khoảng cách dòng bổ sung, có một vài kỹ thuật mà bạn có thể sử dụng. Những kỹ thuật này có thể ảnh hưởng đến một dòng hoặc toàn bộ phần trong trang web của bạn

Nghỉ tiêu chuẩn

1. When writing an HTML document, pressing the Enter or Return key on your keyboard will not register on the finished Web page, no matter how many times you press it. Instead, you must use HTML code to enter spacing between your lines. The most basic of these are , which introduces a single-spaced line break, and

   , which introduces a double-spaced paragraph break. You can use these tags anywhere you want within the body of the Web page.

Không gian không phá vỡ

1. Just like a web browser does not recognize an Enter key within an HTML file, it also will not recognize multiple uses of the or

   tags to create additional space. For example, entering "Hi

   There" will only register the first

   tag, looking like this:

   Xin chào

   Ở đó

   If you want all five paragraph breaks between the two words, you must place a non-breaking space between each

   tag. This code for a space will instruct the browser to act on all five

   tags. The code for a nonbreaking space is   and can be inserted as follows:

   Hi

    

    

    

    

   There

Đường kẻ ngang

1. You can further separate sections of a Web page with a horizontal line. It is a line that goes across the screen, with a paragraph break above and below. The code for a horizontal line is , and can be inserted anywhere within the body. This tag also works within tables and other special formatting, dividing only the table cell that it is placed on without affecting the others.

CSS

1. If you want wider spacing for an entire section of your web page, using multiple or

   tags can become very tedious, and will not allow you to adjust the space between lines. Instead you can use CSS, which is a more advanced form of HTML. First you will enter the following code in the section:

   p. dấu cách {line-height. 150%;}

   Ở đây "150%" là kích thước của khoảng cách giữa các dòng khi so sánh với mặc định. Nó có thể được đặt thành bất kỳ giá trị nào bạn muốn. Trong phần nội dung của trang Web, hãy bao quanh phần mà bạn muốn tạo khoảng cách bằng các thẻ

   và

   Mỗi dòng giữa các thẻ đó sẽ được đặt cách nhau như bạn đã chỉ định

   Có nhiều cách dễ dàng để chia nhỏ cấu trúc trang của bạn để tách các chủ đề hoặc ý tưởng mà không cần tạo các lớp hoặc id

   Bạn có thể sử dụng ngắt dòng hoặc quy tắc ngang [i. e. , lines] để làm như vậy

   Giả sử bạn muốn mã hóa một bài báo về các quán cà phê ngon nhất của New York theo quận và bạn muốn nó được cấu trúc như sau

   Bài viết trên web về các quán cà phê ở New York

   Hãy chú ý đến hai điều

   • Các địa chỉ dưới mỗi tên quán cà phê

   • Dòng phân cách danh sách Manhattan từ danh sách Brooklyn

   Đây là những gì chúng ta sẽ đề cập trong chương này

   ngắt dòng

   Các đoạn văn là các phần tử cấp khối, nghĩa là chúng chiếm chiều rộng của phần tử chứa chúng theo mặc định. Họ cũng có khoảng cách trên và dưới họ. Nó không chỉ là một ngắt dòng đơn giản

   Xem khoảng cách giữa "Dòng 1" và "Dòng 2" trong hình ảnh sau đây?

   Khoảng cách dòng mặc định xuất hiện giữa các đoạn văn

   Tuy nhiên, đôi khi bạn không muốn có thêm không gian đó. Bạn sẽ muốn có ít khoảng trống hơn giữa mỗi dòng

   Ít khoảng cách hơn giữa hai dòng khác nhau

   Điều này đúng đặc biệt đối với địa chỉ và bài thơ. Bạn không cần một đoạn hoàn toàn mới cho mỗi dòng trong một địa chỉ. Một ngắt dòng đơn giản và hẹp hơn sẽ làm

   To create line breaks in HTML, use the
   tag. There is no closing tag necessary.

   Toby's Estate
   
       125 N 6th St
       
   
       Brooklyn, NY 11249
   

   Trong đoạn mã trên, sẽ có một ngắt dòng giữa "125 N 6th St" và "Brooklyn, NY 11249" sẽ không có khoảng cách quá lớn xuất hiện giữa hai thành phần đoạn văn. Nó sẽ chỉ là một ngắt dòng tốt đẹp

   Địa chỉ có dấu ngắt thành các dòng riêng biệt

   This is what the address would look like as two separate

   elements instead of one paragraph containing a line break:

   Địa chỉ với các dòng dưới dạng đoạn văn riêng biệt. ngoại hình kỳ lạ

   Đó là một lượng không gian kỳ lạ, phải không?

   Don't add
   tags everywhere just to create additional space on the page. Use them if a line break between two lines of text makes sense for your content [the lines of an address, for example, are always bunched closer together. Breaking them apart would make it harder for readers to understand]. Otherwise, if the extra space you want is purely visual, create it using CSS. Remember that HTML tags are for your content, not its appearance.

   quy tắc ngang

   Bạn có thể có các chủ đề nội dung khác nhau trong một trang có liên quan nhưng đáng để tách ra cho rõ ràng. Trong ví dụ trên, quán cà phê ở Manhattan được tách biệt với quán cà phê ở Brooklyn vì nó giúp nhóm các nội dung khác nhau trong bài viết

   To create a line, or a "horizontal rule" in HTML, simply use an tag.

   Manhattan
   ...
   
   ...
   Brooklyn

   Quy tắc ngang

   Here's the full HTML code for the coffeeshop article [find those
   and tags!]:

   
       
   New York's best coffeeshops
       
   New York has some great coffeeshops. Make sure not to miss the hot new addresses opening up left and right!
       
   Manhattan
   
       
   The Bean
       
   
           824 Broadway
   
           New York, NY 10003
       
       
   There are multiple Bean locations in the city. It's a good place to get work done because they're open late.
   
       
   Third Rail
       
   
           240 Sullivan St
   
           New York, NY 10012
       
       
   Coffee and donuts! What more could you want?
       
       
   Black Fox Coffee Co.
       
   
           70 Pine St
   
           New York, NY 10270
       
       
   Black Fox has an incredible bean selection and nice snacks.
   
       
   Stumptown
       
   
           18 W 29th St
   
           New York, NY 10001
       
       
   Does this even need explaining?
       
       
   
       
   Brooklyn
       
   Toby's Estate
       
   
           125 N 6th St
   
           Brooklyn, NY 11249
       
       
   Toby's has grown a lot from its initial location in Brooklyn. They now have three locations in NYC.
   

   Luyện tập

   Đi đến bài tập CodePen này. Bạn sẽ thêm một phần mới cho vùng lân cận Queens bằng cách sử dụng thước kẻ ngang. Bạn sẽ thêm một quán cà phê ở Queens [thật hoặc ảo], đảm bảo tạo địa chỉ của quán bằng cách sử dụng dấu ngắt dòng

   1. Thêm một thước ngang [