Wartość normal jest domyślną wartością właściwości line-height.
Domyślnie rozmiar wysokości wierszy elementu HTML określany jest automatycznie przez przeglądarkę internetową.
line-height:normal;
rozmiar wysokości wierszy tego elementu "div" został automatycznie określony przez przeglądarkę internetową
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar wysokości wierszy tego elementu "div" został automatycznie określony przez przeglądarkę internetową
</div>
</body>
</html>
Za pomocą właściwości line-height oraz dowolnej nieujemnej liczby możemy określić rozmiar wysokości wierszy interesującego nas elementu HTML.
Aby obliczyć ostateczną wartość właściwości "line-height" przeglądarka internetowa pomnoży podaną przez nas liczbę przez wartość właściwości font-size elementu HTML, którego rozmiar wysokości wierszy chcemy określić.
line-height:2;
rozmiar czcionki tekstu tego elementu "div" wynosi 20 pikseli, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "20px", ponadto rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "2", dzięki czemu przeglądarka internetowa obliczyła ostateczną wartość właściwości "line-height" na podstawie wyrażenia "2×20px"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
line-height:2;
font-size:20px;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar czcionki tekstu tego elementu "div" wynosi 20 pikseli, ponieważ do tego elementu "div" została dodana właściwość "font-size" wraz z wartością "20px", ponadto rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "2", dzięki czemu przeglądarka internetowa obliczyła ostateczną wartość właściwości "line-height" na podstawie wyrażenia "2×20px"
</div>
</body>
</html>
line-height:40px;
rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "40px"
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
div {
line-height:40px;
font-size:1.3em;
background-color:#7DCDE8;
}
</style>
</head>
<body>
<div>
rozmiar wysokości wierszy tego elementu "div" wynosi 40 pikseli, ponieważ do tego elementu "div" została dodana właściwość "line-height" wraz z wartością "40px"
</div>
</body>
</html>
