Hướng dẫn khoảng cách css

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

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Trình duyệt hỗ trợ
CSS của thuộc tính letter-spacing có dạng
Thực hành thuộc tính letter-spacing
Tạo khoảng cách giữa các từ (chữ) trong CSS với thuộc tính word-spacing
Demo và thực hành thuộc tính word-spacing

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

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ụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC WEB CHUẨN</p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

p {
    letter-spacing: 5px;
}

Hiển thị trình duyệt khi có CSS:

Trình duyệt hỗ trợ

Thuộc tính letter-spacing được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

Home » Web Development

Ví dụ về co giãn khoảng cách giữa các ký tự trong CSS với thuộc tính letter-spacing

Với CSS, nếu bạn muốn khoảng cách giữa các các ký tự cách xa ra hoặc gần lại trong cùng một từ thì sử dụng thuộc tính letter-spacing. Cũng có thể gọi nó là co giãn khoảng cách giữa các ký tự (các chữ cái) trong một từ.

Còn để tạo khoảng cách giữa các từ trong một câu hay đoạn văn bạn sử dụng thuộc tính word-spacingnhé !

CSS của thuộc tính letter-spacing có dạng

Đối tượng thường ứng dụng thuộc tính này là LOGO, slogan, hoặc một đoạn chữ mà bạn muốn nó nổi bật so với phần còn lại.

.ten-doi-tuong {
letter-spacing: 5px;
}

Thực hành thuộc tính letter-spacing

Bạn xem minh họa dưới đây và nhấn vào icon CodePen để vào trực tiếp giao diện thực hành nhé !

See the Pen
Thuộc tính letter-spacing by Hocban.vn (@hocbanvn)
on CodePen.

Như vậy là xong rồi đó, giờ bạn có thể ứng dụng nó trong việc tùy biến độ co giãn ký tự trong CSS dễ dàng rồi.

About The Author

Tịnh Nguyễn

Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.

Home » Web Development

Ví dụ về khoảng cách giữa các từ trong CSS khi dùng thuộc tính word-spacing

Nếu muốn tạo khoảng cách giữa các ký tự trong một từ thì bạn dùng thuộc tính letter-spacing. Trong bài này mình chia sẻ cách Tạo khoảng cách giữa các từ (chữ) trong CSS với thuộc tính word-spacing.

Tạo khoảng cách giữa các từ (chữ) trong CSS với thuộc tính word-spacing

Thuộc tính word-spacing có dạng như thế này:

.ten-doi-tuong {
word-spacing: 5px;
}

Đối tượng áp dụng là văn bản thông thường, tiêu đề bài viết,… nói chung cái này web nào cũng cần ứng dụng tùy vào sở thích của mỗi người. Giá trị khoảng cách từ mặc định là 0px, tuy nhiên nếu bạn muốn: