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. Các 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. Show
Phá vỡ tiêu chuẩn
Không gian không phá vỡ
Đường ngang
CSS
Khi mã hóa các trang HTML cho một trang web, khoảng cách dòng của nội dung văn bản có lẽ là một trong những thuộc tính thường là & nbsp; để lại mặc định. Hầu hết thời gian, bạn thậm chí không nghĩ về nó và mặc định hoạt động tốt nhất trong hầu hết các trình duyệt. Khoảng cách đường hoặc chiều cao đường là chiều cao dọc giữa các dòng văn bản trong trang HTML được hiển thị. Hầu như luôn luôn có giá trị khoảng cách này được đặt thành một giá trị thích hợp bởi trình duyệt hoặc công cụ kết xuất. Giá trị này thường phụ thuộc vào phông chữ của trang được hiển thị, độ phân giải của trang và một số yếu tố khác.line spacing or line height is the vertical height between lines of text in a rendered html page. Almost always this spacing value is set to an appropriate value by the browser or the rendering engine. This value is usually dependent on the font of the rendered page, resolution of the page and several other factors. Phải nói rằng nó hiếm khi cần phải thay đổi, thỉnh thoảng bạn gặp phải những tình huống mà bạn muốn thay đổi tài sản này. Bạn có thể thấy rằng phông chữ bạn đang sử dụng tạo ra quá ít hoặc quá nhiều chiều cao dòng theo mặc định. Nó cũng có thể là một yêu cầu đặc biệt, ví dụ như các dòng cần tách biệt nhiều hơn bình thường để nhấn mạnh. Trước hết, chúng ta hãy xem mặc định là gì được sử dụng bởi hầu hết các trình duyệt. Trong hầu hết các trình duyệt hiện đại, khoảng cách dòng thường được đặt thành 110% hoặc 120% kích thước pixel hoặc kích thước phông chữ. Điều này hoạt động tuyệt vời trong hầu hết các trường hợp, làm cho văn bản đủ dễ đọc để được đọc. Để sửa đổi khoảng cách dòng, bạn thường sẽ sử dụng Bảng kiểu xếp tầng (CSS). Thuộc tính CSS xử lý điều này được đặt tên là chiều cao dòng và có thể được sử dụng với hầu hết các thẻ HTML bao quanh văn bản trên trang web.line-height and can be used with most HTML tags that surrounds the text on the webpage.  Bạn có thể chỉ định giá trị cho chiều cao dòng giống như bạn sẽ chỉ định bất kỳ kích thước nào khác trong CSS, dưới dạng số, kích thước pixel hoặc theo tỷ lệ phần trăm. Giống như bất kỳ phong cách nào khác, bạn có thể chỉ định chúng ở bất kỳ cấp độ thẻ nào, sử dụng bất kỳ kỹ thuật CSS nào. Bạn cũng có thể nội tuyến nó, nếu cần. Trong bài đăng này, chúng tôi sẽ sử dụng thuộc tính kiểu của thẻ P làm ví dụ, nhưng bạn có thể sử dụng nó trong các thẻ khác cũng như cơ thể, nhịp hoặc div.line-height just as you would specify any other size in CSS, either as a number, pixel size or as a percentage. Just as any other style you can specify them at any tag level, using any of the css techniques. You can inline it as well, if needed. In this post, we will use the style attribute of the p tag as examples, but you can use it in other tags as well such as body, span or div. Sử dụng số tương đốiKhi bạn chỉ định các giá trị là một số, nó dựa trên kích thước phông chữ hiện tại là cơ sở. Kích thước phông chữ hiện tại được nhân với số mà bạn chỉ định để tính chiều cao dòng hoặc không gian giữa các dòng. <p style="line-height:1.4"> Paragraph content here </p> Bạn cũng có thể sử dụng các phương thức khác để chỉ định các giá trị, chẳng hạn như EM, REM, PT, v.v. làm ví dụ, hãy để xem cách sử dụng kích thước PX hoặc pixel. Sử dụng tỷ lệ phần trămKhi bạn sử dụng tỷ lệ phần trăm, nó hoạt động tương tự như sử dụng các số tương đối. Nó dựa trên kích thước phông chữ hiện tại của phần tử. Tỷ lệ phần trăm thực sự là một cách khác nhau để chỉ định kích thước tương đối tương đương với số tương đối. <p style="line-height:134%"> Paragraph content here now has a spacing equivalent to 1.34 </p> Nếu bạn muốn giảm chiều cao, thì bạn sẽ sử dụng giá trị nhỏ hơn 100% (hoặc dưới 1 trong phương thức số tương đối). Một ví dụ sẽ là <p style="line-height:85%"> Paragraph content here has a spacing equivalent to 0.85. </p> Sử dụng đơn vị EMMột đơn vị khác bạn có thể sử dụng là đơn vị EM. Ở đây kích thước được tính toán liên quan đến kích thước phông chữ của phần tử. <p style="line-height:2em"> paragraph content here will have spacing twice that of the element's font size. </p> Sử dụng đơn vị REMMột đơn vị tương đối khác mà bạn có thể sử dụng là REM, tương tự như đơn vị EM trong ví dụ trên, nhưng giá trị được tính toán dựa trên kích thước phông chữ của phần tử gốc, không phải kích thước của phần tử hiện tại. Điều này có thể khá tiện dụng để đối phó với các thẻ lồng nhau sửa đổi kích thước phông chữ. <p style="line-height:3rem"> The paragraph content is spaced three times the size of the root font size. </p> Sử dụng kích thước pixelBạn cũng có thể chỉ định chiều cao dòng bằng cách sử dụng kích thước pixel. Điều này làm cho khoảng cách độc lập với phông chữ đang được sử dụng, có thể không phải lúc nào cũng là một ý tưởng tuyệt vời & nbsp; <p style="line-height:16px"> Paragraph content here </p> Như bạn mong đợi, các giá trị âm không được phép trong thuộc tính có chiều cao dòng. & NBSP; như một quy tắc của ngón tay cái, luôn luôn cố gắng sử dụng một trong hai giá trị ít hơn (tỷ lệ phần trăm hoặc số). Điều này mang lại cho nó một số tính linh hoạt khi nói đến các phông chữ khác nhau có thể được sử dụng. Điều này cũng hoạt động tốt với các độ phân giải khác nhau của các thiết bị nơi trang web của bạn có thể được xem. Mặc dù tôi đã sử dụng kiểu nội tuyến làm ví dụ, nhưng bạn rất có thể sử dụng cùng một cú pháp trong các tệp CSS (Tờ kiểu xếp tầng) hoặc bất kỳ nơi nào bạn xác định các kiểu. Như tôi đã đề cập, mặc định hoạt động tốt nhất trong hầu hết các trường hợp. Đảm bảo kiểm tra kết xuất trang web của bạn trong càng nhiều thiết bị và trình duyệt càng tốt. Làm cách nào để thay đổi khoảng cách trong HTML?Thêm không gian bên dưới một dòng hoặc đoạn văn bản để thêm không gian bên dưới một dòng hoặc đoạn văn bản hoặc đẩy văn bản xuống thấp hơn trên trang một lần, bạn có thể sử dụng thẻ.Dưới đây là một ví dụ về cách kỹ thuật này có thể được áp dụng.Mã trên tạo văn bản hiển thị dưới đây.Câu này chứa văn bản ví dụ.use the
tag. Below is an example of how this technique can be applied. The code above creates the text shown below. This sentence contains example text. Làm thế nào để bạn thêm khoảng cách văn bản trong HTML?Vì không có ký tự bàn phím không gian trống trong HTML, bạn phải nhập thực thể & nbsp;cho mỗi không gian để thêm.Để chèn khoảng trống vào văn bản trong HTML, Type & NBSP;cho mỗi không gian để thêm.Ví dụ: để tạo năm khoảng trống giữa hai từ, nhập & nbsp;thực thể năm lần giữa các từ.type the entity for each space to add. To insert blank spaces in text in HTML, type for each space to add. For example, to create five blank spaces between two words, type the entity five times between the words.
Làm thế nào để bạn thêm khoảng cách dòng trong HTML CSS?Sử dụng thuộc tính có chiều cao dòng trong CSS để làm như vậy.Các trình duyệt theo mặc định sẽ tạo ra một lượng không gian nhất định giữa các dòng để đảm bảo rằng văn bản có thể dễ dàng đọc được.Ví dụ, đối với loại 12 điểm, trình duyệt sẽ đặt khoảng 1 điểm không gian thẳng đứng giữa các đường.. Browsers by default will create a certain amount of space between lines to ensure that the text is easily readable. For example, for 12-point type, a browser will place about 1 point of vertical space between lines. |
