Giới thiệu
Câu hỏi hay,
Tôi học được hầu hết những điều này thông qua kinh nghiệm cá nhân.
Trong trường hợp này, chiều cao DIV được đặt thành tự động. Nó sẽ phát hiện chiều cao của nội dung của chính nó và đánh giá chiều cao mới của nó từ đó.
Rõ ràng, DIV chỉ tính đến chiều cao dòng của. Điều này có thể là do số lượng phông chữ đa dạng. Chiều cao dòng cung cấp cho chúng tôi khả năng thích ứng mà chúng tôi cần đối với các loại phông chữ khác nhau.
Nói ngắn gọn
cỡ chữ
Kích thước phông chữ chỉ thay đổi phông chữ thực tế chứ không thay đổi các phần tử div xung quanh nó
chiều cao giữa các dòng
Chiều cao dòng là chiều cao của dòng thực và sẽ thay đổi các phần tử div xung quanh nó
Đợi một chút...
Nếu chúng ta có một cái gì đó như thế này:
div {
background: green;
margin-top: 50px;
}
.test-one {
font-size: 20px
}
.test-two {
font-size: 40px
}
<div>
<span class="test-one"> test one </span>
</div>
<div>
<span class="test-two"> test one </span>
</div>
Rõ ràng kích thước của DIV (height: auto;) thay đổi theo kích thước phông chữ. Đó là bởi vì độ cao dòng sẽ tự động điều chỉnh cho phù hợp nếu nó không được đặt theo cách thủ công.
Một ngoại lệ
Khi kiểm tra thêm, tôi nhận thấy rằng DIV không phải lúc nào cũng khớp với chiều cao dòng. Điều này xảy ra nếu chiều cao dòng rất nhỏ và phông chữ vượt quá nó một khoảng cách.
Ví dụ bạn đã đưa ra -
.outer {
margin-top: 50px;
background-color: green;
width: 150px;
font-family: "Times New Roman"
}
.letter-span-1 {
background-color: red;
line-height: 40px;
font-size: 40px;
}
.letter-span-2 {
background-color: red;
line-height: 15px;
font-size: 40px;
}
.letter-span-3 {
background-color: red;
line-height: 65px;
font-size: 40px;
}
<span class="letter-span-1">XxÀg</span>
<div class="outer">
<span class="letter-span-1">XxÀg</span>
</div>
<div class="outer">
<span class="letter-span-2">XxÀg</span>
</div>
<div class="outer">
<span class="letter-span-3">XxÀg</span>
</div>
Nếu bạn nhìn kỹ,
letter-span-1 và letter-span-3 đều dẫn đến DIV bằng chiều cao dòng.
Tuy nhiên, letter-span-2 thì không.
-------------- Chiều cao dòng - Chiều cao thực tế
letter-span-1: 40px - 40px
letter-span-2: 15px - 25px
letter-span-3: 65px - 65px
Chú ý rằng letter-span-2 là nhỏ nhất. Nó quá nhỏ, nó thực sự sẽ giới hạn chiều cao của div. Bạn có thể kiểm tra điều này bằng cách thay đổi kích thước phông chữ.
Tại sao?"
Tại sao lại có hai cài đặt khác nhau và không chỉ thay đổi chiều cao bình thường?
Thành thật mà nói, tôi không chắc lắm, nhưng tôi suy đoán rằng đó là do phông chữ không chuẩn. Nếu máy tính đọc sai một phông chữ cụ thể, nó có thể đánh giá sai chiều cao dòng.
Chưa kể đến vô số "Thủ thuật CSS" mà bạn có thể làm với chiều cao dòng. Nó là tuyệt vời để thêm không gian cho các thiết kế mở.
Phần kết luận
Chiều cao dòng xác định chiều cao div, trừ khi chiều cao dòng rất nhỏ, trong trường hợp đó, kích thước phông chữ sẽ xác định kích thước.
