0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>These are the line-height options that we have already reviewed:</p>
1
<p>These are the line-height options that we have already reviewed:</p>
2
<ul><li>The relative value normal, which we do not control, as it is automatically calculated by the browser depending on the font-size.</li>
2
<ul><li>The relative value normal, which we do not control, as it is automatically calculated by the browser depending on the font-size.</li>
3
<li>The absolute value calculated in px.</li>
3
<li>The absolute value calculated in px.</li>
4
</ul><p>But what if we need to assign a relative value, but not one that is the same as normal? This is also possible. To accomplish this, the line-height value can be assigned a percentage or a multiplier. In this case, the browser calculates the value dynamically depending on the font-size:</p>
4
</ul><p>But what if we need to assign a relative value, but not one that is the same as normal? This is also possible. To accomplish this, the line-height value can be assigned a percentage or a multiplier. In this case, the browser calculates the value dynamically depending on the font-size:</p>
5
p { font-size: 10px; line-height: 150%; /* Calculated value: 10px * 150% = 15px */ line-height: 2; /* Calculated value: 10px * 2 = 20px */ }<p>As you have probably realised, relative values are more flexible than absolute ones. But for simple websites like ours, a fixed font-size and line-height will be totally adequate.</p>
5
p { font-size: 10px; line-height: 150%; /* Calculated value: 10px * 150% = 15px */ line-height: 2; /* Calculated value: 10px * 2 = 20px */ }<p>As you have probably realised, relative values are more flexible than absolute ones. But for simple websites like ours, a fixed font-size and line-height will be totally adequate.</p>