Hướng dẫn paragraph spacing css - khoảng cách đoạn văn css

• Trang chủ
• Tham khảo
• CSS
• Thuộc tính word-spacing

Định nghĩa và sử dụng

Thuộc tính word-spacing tăng hoặc giảm không gian giữa các từ trong đoạn văn bản.

Có thể sử dụng giá trị âm.

Cấu trúc

tag {
    word-spacing: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
word-spacing	normal	word-spacing: normal;	Không tăng khoảng cách giữa các từ trong đoạn văn bản.
đơn vị	word-spacing: 2px;	Tăng hoặc giảm khoảng cách giữa các từ trong đoạn văn bản, có thể sử dụng giá trị âm.
inherit	word-spacing: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Mô tả

HỌC WEB CHUẨN

word-spacing

normal

p {
    word-spacing: 20px;
}

word-spacing: normal;

Không tăng khoảng cách giữa các từ trong đoạn văn bản.

đơn vị

word-spacing: 2px;

• White Space
• The

  
  
  
  HỌC WEB CHUẨN
  
  

  0 property specifies how white-space inside an element is handled.
• This example demonstrates how to disable text wrapping inside an element:
• The CSS Text Spacing Properties

Property

Thuộc tính letter-spacing tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text.

Cấu trúc

tag {
    letter-spacing: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
letter-spacing	normal	letter-spacing: normal;	Không tăng khoảng cách giữa các ký tự cho chữ.
đơn vị	letter-spacing: 2px;	Tăng hoặc giảm khoảng cách giữa các ký tự.
inherit	letter-spacing: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

Mô tả

HỌC WEB CHUẨN

Hiển thị Trình Duyệt Khi

CSS VIếT:

p {
    letter-spacing: 5px;
}

Hiển thị Trình Duyệt Khi Có CSS:

Trình diyệt hỗ trợ

THUộC TÍNH CHƯƠNG TRÌNH ĐỘ

Giá trị "thừa kế" không hỗ trợ trình diyệt IE7 tr

---

Text Spacing

In this chapter you will learn about the following properties:

• text-indent
• letter-spacing
• line-height
• word-spacing

• 
  
  
  HỌC WEB CHUẨN
  
  

  0

---

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

---

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

---

Line Height

The line-height property is used to specify the space between lines:

---

---

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

---

White Space

The

HỌC WEB CHUẨN

0 property specifies how white-space inside an element is handled.

This example demonstrates how to disable text wrapping inside an element:

---

The CSS Text Spacing Properties

Property	Description
letter-spacing	Specifies the space between characters in a text
line-height	Specifies the line height
text-indent	Specifies the indentation of the first line in a text-block
white-space	Specifies how to handle white-space inside an element
word-spacing	Specifies the space between words in a text

Kiến thức về CSS (P4): Thuộc tính borderthuộc tính letter-spacing và thuộc tính line-height. Các bạn cùng theo dõi bài dưới đây.

Thuộc tính letter-spacing được dùng để định dạng khoảng cách giữa các ký tự trong một đoạn văn bản. Thuộc tính này có thể áp dụng cho tất cả các phần tử của cả HTML.

Thuộc tính letter-spacing có thể nhận giá trị:

• normal: độ rộng mặc định. Trong thực tế,  một giá trị độ dài mà bạn thiết lập là 0 thì độ rộng  sẽ ở chế độ mặc định.: độ rộng mặc định. Trong thực tế,  một giá trị độ dài mà bạn thiết lập là 0 thì độ rộng  sẽ ở chế độ mặc định.
• length: sử dụng giá trị lớn hơn 0 sẽ làm tăng độ rộng giữa các chữ cái trong một từ. Trình duyệt sẽ bỏ qua giá trị âm.: sử dụng giá trị lớn hơn 0 sẽ làm tăng độ rộng giữa các chữ cái trong một từ. Trình duyệt sẽ bỏ qua giá trị âm.

Cấu trúc

Ví dụ

Thuộc tính line-height

Thuộc tính line-height dùng để điều chỉnh chiều cao dòng. Nói cách khác line-height điều chỉnh khoảng cách giữa hai đường cơ sở của các dòng liên tiếp nhau. Những giá trị mà bạn có thể gán cho thuộc tính line-height bao gồm:

• Số thuần túy, thí dụ: 1 hoặc 2 hoặc 3…bạn có thể để số thập phân nếu muốn, chẳng hạn 1.5 – giá trị này có nghĩa là chiều cao dòng gấp 1.5 kích thước font. Kích thước mặc định mà các trình duyệt áp dụng cho line-height rơi vào khoảng giá trị là 1.2
• %, chẳng hạn 100%, 200% hay 150% – giá trị này có nghĩa là chiều cao dòng gấp 2 kích thước font
• Đơn vị độ dài như px, pt, in, cm…Chúng ta nên hạn chế cách này vì trong trường hợp người dùng phóng to hay thu nhỏ font thì khoảng cách sẽ bị thu hẹp hoặc giãn ra bất thường.

Cấu trúc

Ví dụ

Thuộc tính line-height

• Thuộc tính line-height dùng để điều chỉnh chiều cao dòng. Nói cách khác line-height điều chỉnh khoảng cách giữa hai đường cơ sở của các dòng liên tiếp nhau. Những giá trị mà bạn có thể gán cho thuộc tính line-height bao gồm:
• Số thuần túy, thí dụ: 1 hoặc 2 hoặc 3…bạn có thể để số thập phân nếu muốn, chẳng hạn 1.5 – giá trị này có nghĩa là chiều cao dòng gấp 1.5 kích thước font. Kích thước mặc định mà các trình duyệt áp dụng cho line-height rơi vào khoảng giá trị là 1.2
• %, chẳng hạn 100%, 200% hay 150% – giá trị này có nghĩa là chiều cao dòng gấp 2 kích thước font
• Đơn vị độ dài như px, pt, in, cm…Chúng ta nên hạn chế cách này vì trong trường hợp người dùng phóng to hay thu nhỏ font thì khoảng cách sẽ bị thu hẹp hoặc giãn ra bất thường.
• Xem thêm:
• Kiến thức về CSS (P1): Giới thiệu về CSS
• Kiến thức về CSS (P2): Cách viết nội dung, bộ chọn và comment trong CSS

Kiến thức về CSS (P3): Các thuộc tính background trong CSS.