2012-08-09 35 views
5

Chiều cao phần tử khối bị ảnh hưởng bởi kích thước phông chữ nội dung phải không?kích thước phông chữ có ảnh hưởng đến chiều cao của phần tử khối không?

Tốt nhất là chỉ cho bạn thấy những gì tôi muốn nói, hãy nhìn vào ví dụ fiddle

này Nếu bạn tăng kích thước phông chữ của lớp .p bên trong div, chiều cao của div tăng quá, tại sao điều này là gì?

+0

u cần div linh hoạt? – Lukas

+0

Tôi tin rằng http://jsfiddle.net/DtcFn/6/ là một fiddle tốt hơn trong đó tôi nghĩ rằng nó cho thấy những thay đổi mà bạn đang nói về. Điều này hy vọng sẽ làm cho nó rõ ràng hơn cho mọi người những gì thay đổi và những gì thay đổi kích cỡ bạn đang nói về. – Chris

+0

yes.it mô tả câu hỏi một cách trực quan hơn.Cảm ơn bạn – SKing7

Trả lời

1

Điều này là do bạn không xác định được height -property trong Biểu định kiểu. Mặc định là height: auto.

+0

Chỉ định chiều cao cho div không ngăn không gian phía trên văn bản, nó sẽ chỉ cắt văn bản ở độ cao đó. – Guffa

+1

@Guffa: không gian bên trên phải làm gì? Câu hỏi đặt ra là tại sao chiều cao thay đổi và lý do là chiều cao không được xác định ... Chiều cao đó được đưa lên bởi chắc chắn là một vấn đề hoàn toàn khác? – Chris

+0

@Guffa: Ah, tôi hiểu ý của bạn là gì, nếu bạn tăng kích thước phông chữ lên lớp 'p' lên trên 33px thì div sẽ lớn hơn nhưng phông chữ sẽ không thay đổi. Tôi đã thử thay đổi giá trị đó nhưng không đủ cao để kích thước phông chữ duy nhất mà tôi thấy tạo nên sự khác biệt là một thay đổi văn bản. – Chris

1

Vì bạn không đặt chiều cao trên div.

Điều này có nghĩa là div sẽ mở rộng để phù hợp với nội dung của nó, trong trường hợp này là yếu tố p.

Nếu bạn không chỉ định chiều cao, nó sẽ mặc định là height:auto.

+0

nhưng không có phần tử nào bị ảnh hưởng bởi kích thước phông chữ của div của tên lớp là p – SKing7

+0

Chỉ định chiều cao cho div không ngăn không gian phía trên văn bản, nó sẽ chỉ cắt văn bản ở độ cao đó. – Guffa

0

bạn cần phải thiết lập div chiều cao, xem http://jsfiddle.net/VpeW8/

+0

Chỉ định chiều cao cho div không ngăn không gian phía trên văn bản, nó sẽ chỉ cắt văn bản ở độ cao đó. – Guffa

7

Đó là bởi vì kích thước phông chữ của div quyết định nơi đường cơ sở cho các văn bản là, và nhịp được đặt trên dòng cơ bản.

Tăng kích thước phông chữ của div làm cho khoảng cách trên và dưới đường cơ sở cao hơn. Đó là nội dung của khoảng cách bên trong cung cấp kích thước phần tử, vì vậy nó chỉ là khoảng cách phía trên đường cơ sở ảnh hưởng đến kích thước, không phải khoảng cách bên dưới đường cơ sở, vì vậy bạn sẽ thấy văn bản bị đẩy xuống, nhưng không có không gian bên dưới văn bản.

+0

oh.thank you .if có một số tài liệu về điều này. Ví dụ trong tài liệu w3 – SKing7

+0

liều lượng cỡ chữ quyết định đường cơ sở như thế nào? – SKing7

+0

@ SKing7: Kích thước phông chữ đặt chiều cao văn bản, nhưng chiều cao dòng giới hạn chiều cao.Đặt một số ký tự bên ngoài phạm vi để xem kích thước phông chữ và chiều cao dòng ảnh hưởng đến chúng như thế nào: http://jsfiddle.net/Guffa/DtcFn/7/ – Guffa

0

Vì chiều cao dòng được ước tính theo kích thước phông chữ. Để ngăn chặn div mở rộng theo kích thước phông chữ, hãy đặt thuộc tính chiều cao dòng trong CSS.

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