Rate this post

‘line-height’ là một thuộc tính trong CSS dùng để xác định khoảng cách giữa các dòng văn bản trong một thành phần. Nó có thể được xác định bằng một giá trị tuyệt đối (ví dụ: 20px) hoặc một giá trị tương đối (ví dụ: 1.5).

Các bài viết liên quan:

Ví dụ sử dụng ‘line-height’:

p {
  line-height: 1.5; /* tăng khoảng cách giữa các dòng văn bản lên 1.5 lần kích thước chữ */
}

‘line-height’ có thể được sử dụng với bất kỳ thành phần văn bản nào trong HTML, bao gồm cả heading, paragraph, span.

‘line-height’ cũng có thể được sử dụng với các thành phần khác nhau, chẳng hạn như:

  • Để tăng khoảng cách giữa các dòng trong một menu dọc.
  • Để tăng khoảng cách giữa các dòng trong một form để tăng khả năng đọc và giúp cho các thông tin dễ hiểu hơn.
  • Để tăng khoảng cách giữa các dòng trong một bảng để giúp cho dữ liệu dễ nhìn hơn.
  • Để tăng khoảng cách giữa các dòng trong một đoạn văn bản để tăng khả năng đọc và giúp cho các thông tin dễ hiểu hơn.

Tuy nhiên, chúng ta cần lưu ý rằng, quá nhiều khoảng trắng giữa các dòng có thể làm cho văn bản trông rỗng và không chuyên nghiệp. Mức ‘line-height’ tốt nhất sẽ phụ thuộc vào kích thước chữ, font và mục đích sử dụng của bạn.

Một vài ví dụ về line-height trong css

Ví dụ 1: Tăng khoảng cách giữa các dòng trong đoạn văn bản

<p>This is a paragraph with a line-height of 1.5. This will increase the space between lines of text, making it easier to read.</p>
p {
  line-height: 1.5;
}

Ví dụ 2: Tăng khoảng cách giữa các dòng trong một menu dọc

<ul>
  <li>Menu item 1</li>
  <li>Menu item 2</li>
  <li>Menu item 3</li>
</ul>
ul {
  line-height: 2;
}

Ví dụ 3: Tăng khoảng cách giữa các dòng trong một form

<form>
  <label for="name">Name:</label>
  <input type="text" id="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email"><br>
  <input type="submit" value="Submit">
</form>
form {
  line-height: 1.5;
}

Ví dụ 4: Tăng khoảng cách giữa các dòng trong một bảng

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>
table {
  line-height: 1.5;
}

Trong các ví dụ trên, chúng ta sử dụng thuộc tính ‘line-height’ để tăng khoảng cách giữa các dòng trong các thành phần khác nhau, giúp cho văn bản dễ đọc hơn và dễ hiểu hơn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now