Giãn cách văn bản
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau
text-indent
letter-spacing
line-height
word-spacing
- ________số 8
Thuộc tính text-indent
được sử dụng để chỉ định thụt lề cho dòng đầu tiên của văn bản
Khoảng cách chữ cái
Thuộc tính letter-spacing
được sử dụng để chỉ định khoảng cách giữa các ký tự trong văn bản
Ví dụ sau minh họa cách tăng hoặc giảm khoảng cách giữa các ký tự
Chiều cao giữa các dòng
Thuộc tính line-height
được sử dụng để chỉ định khoảng cách giữa các dòng
Giãn cách từ
Thuộc tính word-spacing
được sử dụng để chỉ định khoảng cách giữa các từ trong văn bản
Ví dụ sau minh họa cách tăng hoặc giảm khoảng cách giữa các từ
khoảng trắng
Thuộc tính white-space
chỉ định cách xử lý khoảng trắng bên trong một phần tử
Ví dụ này minh họa cách tắt gói văn bản bên trong một phần tử
Thuộc tính khoảng cách văn bản CSS
Thuộc tínhMô tảletter-spacingChỉ định khoảng cách giữa các ký tự trong textline-heightChỉ định chiều cao của dòngtext-indentChỉ định khoảng cách thụt đầu dòng của dòng đầu tiên trong khối văn bảnwhite-spaceChỉ định cách xử lý khoảng trắng bên trong một phần tửword-spacingChỉ định khoảng cách giữa các từ trong văn bảnCá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
Trình duyệt hiển thị khoảng cách giữa tiêu đề và thẻ đoạn văn, bằng cách áp dụng lề trên và dưới mặc định cho các thẻ này. Nếu bạn muốn xóa tất cả khoảng cách giữa tiêu đề và đoạn văn theo sau nó, bạn phải xóa lề dưới khỏi tiêu đề và lề trên khỏi đoạn văn. Cách dễ nhất là chỉ cần gán lề dưới âm cho tiêu đề. Ghi chú. Lề có thể được đặt thành giá trị âm, mặc dù phần đệm không thể. Mã CSS tiếp theo minh họa điều này
kiểm tra tập tin. css
h2 {
nét chữ. 12px Arial, Geneva, Helvetica, sans-serif;
lề dưới. -6px;
}
kiểm tra tập tin. html
Cách xóa tất cả khoảng trắng giữa tiêu đề và đoạn văn theo sau nó bằng CSS
Cổ phiếu giảm khi Sandy đóng cửa U. S. Thị trường
Chứng khoán giảm trên khắp thế giới và giá xăng tăng khi cơn bão Sandy đe dọa Hoa Kỳ. S. Các nhà máy lọc dầu ở bờ biển phía Đông và đóng cửa giao dịch cổ phiếu. Trái phiếu kỳ hạn hai năm của Ý giảm ngày thứ sáu và đồng euro suy yếu
Điều đó sẽ có nhiều tác dụng phụ không mong muốn, yêu cầu Jon chỉ định rõ ràng lề và phần đệm cho mọi loại phần tử cần chúng
Để giải quyết vấn đề trong tầm tay
h2 {margin-bottom:0} p {margin-top:0}
Điều này sẽ loại bỏ lề dưới khỏi tất cả các thành phần H2 và lề trên khỏi tất cả các đoạn văn. Nếu điều đó là không mong muốn, hãy đặt một lớp trên tiêu đề
Sau đó điều chỉnh các quy tắc CSS
h2.subhead {margin-bottom:0} h2.subhead+p {margin-top:0}
Quy tắc cuối cùng sẽ không hoạt động trong IE6 trở lên. Nếu điều đó là cần thiết, bạn cũng sẽ phải thêm một lớp trên đoạn văn
Đây là một trong những điều bạn biết hoặc bạn không biết. Nếu bạn đang ở thời điểm này, không có gì ngoài tin tốt. nếu bạn đã biết cách điều chỉnh khoảng cách giữa các dòng văn bản bằng HTML và CSS thì bạn đã đọc xong, còn nếu chưa biết thì hãy tiếp tục đọc và bạn sẽ
Trong bài viết này, giải pháp Html Remove Space After Paragraph sẽ được trình bày bằng các ví dụ từ ngôn ngữ lập trình
li p { margin: 0; padding: 0; }Bạn sẽ thấy một số ví dụ về các cách khác nhau để giải quyết vấn đề Html Remove Space After Paragraph trong bài viết này