Tại sao kiểm soát đệm với chiều cao dòng?

Question

Tôi đang xem trang này qua tại meyerweb:

http://meyerweb.com/eric/css/edge/menus/demo.html

và tôi nhận thấy một cái gì đó tò mò về cách đệm trong tiêu đề được tạo:

h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: right; color: #557; letter-spacing: 2px;} 

Bây giờ nếu bạn loại bỏ các line- chiều cao chỉ thị, nó cho biết thêm một chút padding để đầu trang. Vì vậy, chiều cao dòng hoạt động chủ yếu để loại bỏ một chút đệm từ phía trên của h1. Câu hỏi của tôi là: tại sao không bỏ chiều cao dòng và thay đổi padding-top từ 1em thành .9em?

Tôi nhận ra có rất nhiều cách để làm một con mèo trong CSS, nhưng tôi đã tìm ra nếu một chuyên gia như meyer làm theo cách này thì có lẽ một số lý do cho sự lựa chọn.

Cảm ơn, Jonah

Answer 1

Lý do sử dụng chiều cao dòng nhỏ hơn 1em không thực sự không liên quan đến khoảng cách trên đầu, mà là không gian giữa đường viền dưới cùng và dưới cùng của dòng. Có lẽ một ví dụ sẽ minh họa điều này tốt hơn: http://www.jsfiddle.net/yijiang/tptbe/

Như bạn có thể thấy, với mặc định 1em dòng ngồi hơi trên dưới cùng của chữ 'p' và 'g', nhưng với 0.8em sự các chữ cái được đặt ngay bên dưới các chữ cái 'a' và 'b', một vị trí đẹp hơn về mặt thẩm mỹ

Answer 2

Để làm cho khoảng cách giữa cạnh đáy của h1 vào dòng trở nên nhỏ hơn.

Answer 3

Như Jeff đã nói, nó không phải để loại bỏ phần đệm phía trên. thay đổi lề hoặc đệm trên nó, theo một trong hai hướng sẽ không gây ra tác dụng tương tự.