2011-09-30 46 views
25

Sự khác biệt giữa việc sử dụng hai kiểu này khi xử lý văn bản sẽ không bao giờ nhiều hơn một dòng đơn là gì? Cả hai đều có thể tạo ra các kết quả tương tự trên màn hình từ những gì tôi có thể thấy liên quan đến các phần tử trên đầu hoặc ở phần cuối của phần tử. Tại sao sử dụng chiều cao dòng ở tất cả nếu vậy? Chiều cao sẽ có ý nghĩa hơn để sử dụng.chiều cao so với kiểu chiều cao dòng

Chỉnh sửa: Ví dụ về nút được cách điệu này được tạo từ div có văn bản bên trong. Điều này sẽ không bao giờ là đa luồng. Vì vậy, sẽ có chiều cao dòng là cần thiết vì lý do tương thích? hay bất cứ điều gì tôi không biết?

Cảm ơn!

Trả lời

20

height là thước đo dọc của vùng chứa.

line-height là khoảng cách từ đầu dòng đầu tiên của văn bản đến đầu trang giây.

Nếu chỉ được sử dụng với một dòng văn bản, tôi mong muốn chúng tạo ra các kết quả tương tự trong hầu hết các trường hợp.

Tôi sử dụng height khi tôi muốn đặt rõ ràng kích thước vùng chứa và line-height cho bố cục typographic, nơi nó có thể có liên quan nếu người dùng thay đổi kích thước văn bản.

+1

Correction. dòng-chiều cao không có gì để làm với nơi một dòng thứ hai của văn bản và chỉ dựa trên hộp nội tuyến chính nó. – Rob

+0

Đây là một hướng dẫn khác với ví dụ từ [css-tricks] (https://css-tricks.com/almanac/properties/l/line-height/), nếu điều đó có ý nghĩa hơn. –

0

Đối với mục đích thực tế trong trường hợp bạn trích dẫn (không bao giờ gói nhiều hơn một dòng) chiều cao dòng sẽ căn giữa theo chiều dọc văn bản. Hãy cẩn thận về giả định đó mặc dù khi người dùng cuối cùng kiểm soát kích thước phông chữ.

19

Nếu bạn quấn văn bản trong div, hãy đặt chiều cao div và văn bản sẽ phát thành 2 dòng (có thể vì nó đang được xem trên màn hình nhỏ như điện thoại) thì văn bản sẽ chồng chéo với các phần tử bên dưới nó. Mặt khác, nếu bạn cho div một chiều cao dòng và văn bản tăng lên 2 dòng, div sẽ mở rộng (giả sử bạn cũng không cung cấp cho div một chiều cao).

Đây là số fiddle minh họa điều này.

+0

Đã được đưa vào SO sau khi đọc [this] (https://github.com/csswizardry/CSS-Guidelines). Câu trả lời của DwB nên có nhiều cách upvotes hơn. –

0

Giả sử văn bản là nhỏ hơn so với container:

Thiết lập line-height trên thùng xác định chiều cao tối thiểu của dòng hộp bên trong nó. Đối với 1 dòng văn bản, điều này dẫn đến văn bản được căn giữa theo chiều dọc bên trong vùng chứa.

Nếu bạn đặt chiều cao trên vùng chứa thì vùng chứa sẽ phát triển theo chiều dọc, nhưng văn bản bên trong nó sẽ bắt đầu trên dòng đầu tiên (trên cùng) bên trong nó.

0

chiều cao = line-height + padding-top + padding-bottom

Các vấn đề liên quan