Cheat Sheet: Làm thế nào để thụt CSS text

tài nguyên Web đánh giá cao bởi người dùng cho kháng cáo hình ảnh của mình. Vì vậy, ngay cả thông tin văn bản hữu ích không thể đọc được do thực tế rằng nó được thiết kế kém. Kết luận - sự cần thiết phải cẩn thận và chu đáo không chỉ đối với nội dung ngữ nghĩa của các trang, mà còn để trình bày trực quan của nó. Sự ra đời của công nghệ CSS tăng khả năng tạo ra một bài viết hấp dẫn. Một trong những tài sản, nhằm tạo điều kiện nhận thức của văn bản - thụt lề văn bản CSS.

Margin và padding: sự khác biệt là gì?

Trước khi bạn bắt đầu để định dạng văn bản, bạn nên hiểu những gì lề và padding. Mặc dù thực tế rằng những yếu tố đánh dấu trong một số trường hợp giống nhau cho người dùng, có sự khác biệt cơ bản giữa chúng:

• lĩnh vực thiết đặt thuộc tính đệm, thụt lề - lề;
• lĩnh vực được xác định bởi khoảng cách giữa nội dung và ranh giới khối, một không gian - giữa ranh giới của khối liền kề;
• lĩnh vực có thể được coi là một yếu tố trong kích thước (chiều rộng và chiều cao) và không.

thuộc tính margin

Vì vậy, để thiết lập các văn bản đệm CSS ngang hoặc thẳng đứng, sử dụng lề thiết kế. Khách sạn này áp dụng cho các thẻ

tài liệu đoạn thạc sĩ. Trong trường hợp đơn giản nhất, nó có thể được viết như sau:

margin: 12px.

Dòng này có nghĩa là xung quanh một khối văn bản (hoặc bất kỳ khối khác) trên tất cả các bên được đặt trong thụt đầu dòng 12 pixel. Để tăng khoảng thời gian, ví dụ, ba lần là đủ để viết:

margin: 36px.

Nhưng nếu giữa các khối của khoảng thời gian cần phải khác nhau ở mỗi bên? nhà phát triển web sử dụng một số hình thức hồ sơ:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

Trong ví dụ đầu tiên, thụt đầu dòng 11 pixel được làm từ ranh giới thấp hơn và trên của khối, ở hai bên của khối - 22 pixel. Theo một đơn vị kỷ lục thứ hai giữa mép trên và nội dung sẽ được 11 điểm ảnh, giữa thấp hơn - 33 điểm ảnh trên mỗi bên - 22 pixel. Trong văn bản thụt trường hợp CSS thứ ba sẽ có một giá trị của 11 pixel từ phía trên, bên phải 22 pixel, 33 pixel và 44 pixel từ phía dưới bên trái.

Cũng có sẵn là khả năng ghi lại các khoảng cách từ ranh giới khối trên chỉ có một bên: margin-top, margin-bottom , margin-left, margin-right. Dịch tên của các thuộc tính trong ngôn ngữ Nga, nó rất dễ dàng để đoán về cuộc hẹn của họ. Ví dụ, các mục sau đây cho thấy sự thụt vào bên phải sẽ bằng 22 pixel:

margin-right: 22rh.

Đối với khoảng cách còn lại xung quanh các cạnh của khối giả định là tương đương với giá trị của các yếu tố phụ huynh.

thuộc tính margin có nhiều tính năng mà một nhà phát triển cần phải nhớ khi sử dụng CSS văn bản thụt vào theo chiều dọc. Khoảng thời gian của các nguyên tố lân cận không được tóm tắt, và chồng lên nhau. Ví dụ, giả sử rằng một trong những đơn vị có margin-bottom: 15px, và bên dưới các khối liền kề margin-top: 35px. số học nhà trường và lẽ thường dictates rằng tổng khoảng cách giữa chúng sẽ là 50 pixel. Trên thực tế nó không phải là. Một khối với giá trị lớn của biên độ sở hữu «nuốt" người hàng xóm của mình. Kết quả là, khoảng cách giữa các yếu tố là 35 pixel.

"Red" dòng

Làm cho tài liệu trong một trình soạn văn bản, người dùng thích yêu cầu mỗi đoạn mới với dòng "đỏ". Sử dụng CSS thụt lề văn bản bên trái là dễ dàng để làm - sử dụng text-indent thiết kế. Viết nó như thế này:

text-indent: 11px.

Đó là dòng đầu tiên của đoạn được chuyển tương đối so với lề trái của 11 pixel. Để thực hiện các văn bản trên trang web trông giống như một tài liệu trong trình soạn thảo, bạn nên cài đặt một biện minh bổ sung, có nghĩa là, viết:

text-indent: 11px;

text-align: justify.

Ngoài pixel, trong mô tả của việc sử dụng các đơn vị đánh dấu khác - inch tuyên bố phần trăm. Hãy để các đơn vị có thụt đầu dòng văn bản CSS là 10%. Khi chiều rộng của khối 500 pixel, dòng màu đỏ sẽ là 50 pixel (10% của 500).

Đối với tài sản này có thể được trưng bày giá trị kế thừa. hồ sơ này nói rằng các đơn vị sử dụng một tài sản tương tự của đơn vị phụ huynh.

text-indent: kế thừa.

Đáng ngạc nhiên, thụt đầu dòng có thể mất trên các giá trị tiêu cực! Trong trường hợp này, các dự báo được hình thành bởi cái gọi là, đó là nội dung cơ bản vẫn còn tại chỗ, và dòng đầu tiên được chuyển sang cánh trái 22 pixel:

text-indent: -22px.

Các chữ cái không đi qua biên giới trái của trình duyệt, ngoài các text-indent nên được sử dụng để xác định cấu trúc của lĩnh vực này:

padding-left: 22px.

gợi ý hữu ích

Các thuộc tính cơ bản của CSS cho định dạng văn bản được xem xét. Và sửa chữa chúng thực hành giúp đỡ. Dưới đây là một vài lời khuyên cuối cùng về làm thế nào để áp dụng các vật liệu đã học được trong phát triển web:

• dòng màu đỏ và thụt đầu dòng của văn bản - khái niệm khác nhau, và các đặc tính khác nhau được sử dụng để hướng dẫn họ;
• quy tắc thụt đầu dòng dọc không áp dụng toán học - khoảng chồng chéo, "thắng" phần tử với giá trị lớn;
• thụt đầu dòng tiêu cực sử dụng để chỉ dòng đầu tiên của một đoạn văn với một hình ảnh.