About the basis for calculation of line height property using percentages inside of a fixed height

258 views Asked by At

I'm experimenting with using line-height to vertically align text inside of containing div. I find it strange that to do so using a percentage requires the use of (comparatively) astronomically large values. As you can see in this fiddle, I used 700% to push the text all the way down to the bottom margin of the containing div!

Any explanations? I'm curious to know what basis is used to calculate this percentage. Is there any danger that using something like this will break my page?

<!DOCTYPE html>
<html>
<head>
<style>

h1.enormous{
    line-height: 700%;
    font-size: 2em;
}
</style>
</head>
<body>


<div style="background-color:red; width: 300px; height: 125px;">
<h1 class="enormous">VOCÊ APRENDE</h1>
</div>

</body>
</html>
2

There are 2 answers

0
DRD On BEST ANSWER

line-height as a percentage (e.g., 700%) or a constant (e.g., 7) is calculated on the basis of the font-size. Thus, the following declaration font: 12px/2 Sans-Serif will make text size 12 pixels in a line that is 24 pixels (2 * 12).

For your example, to place the text at the bottom of the container, using line-height property, you can do the following: http://jsfiddle.net/07r139tz/.

HTML:

<div class="container">
    <h1 class="enormous">VOCÊ APRENDE</h1>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    padding: 10px;
}

h1.enormous {
    font: 2em/1 Sans-Serif;
    display: inline-block;
    vertical-align: bottom;
}
.container {
    background-color:red;
    width: 300px;
    height: 125px;
    line-height: 125px;
}
4
Adam Buchanan Smith On
h1.enormous{font-size: 2em; line-height: 20px; padding-top: 30%;}
.container{background-color:red; width: 300px; height: 125px;}

That should do it for ya.