Setting the line-height Using Percentage

It is worth setting line-height in the body selector, as all elements can benefit from inheriting
this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use
some space for clarity, but it’s the paragraphs where the increased legibility will be most
noticeable. The rule is simple:
line-height:150%;
In this example, the spacing between the lines of text will be the given percentage of the
current font-size. So, a line-height of 100% will make no difference, whereas a line-height of
150% will create a space half the size of the font. A line-height of 200% will create a space equal
to the size of the font, and so on. Here, the line-height declaration is added to the existing
body selector:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}

The browser window on the right clearly shows that a line-height of 200% creates spacing
equal in height to the size of the text characters. This is great for the example, but in the real
world, a value of 150% or 160% would probably be more appropriate.

Other line-height Values
As well as the very flexible method of setting line-height using percentage, some other values
can be used.

Normal
Sets what the experts call a “reasonable distance between lines.” In actuality, this setting is
exactly the same as specifying no line-height at all, and it is only useful if you wish to override
inherited line-height for a particular element.
line-height:normal;

Number
Sets a number that will be multiplied with the current font-size to set the distance between
the lines. For example, if the font-size is 12px, then specifying a line-height of 2 will result in
a space of 24 pixels between lines of text.
line-height:2;

Length
Sets a fixed distance between the lines, which is great for precision, but it is important to
remember that when text is resized, the line spaces will not increase or decrease at the same
ratio as the text.
line-height:8px;
To ensure appropriate scaling when text is resized, use a flexible length measurement such as
ems or percentage.

Setting dimensions and alignment

As you can see from the examples so far, browsers by default set cell sizes to the smallest
possible values that are large enough to accommodate the contents and any cell padding
settings defined. Although this is suitable for the majority of purposes, designers tend to
want more visual control over layouts.
Long-time designers may be well-versed in the practice of using height and width attributes
to control table and cell dimensions, but beware. The width attribute is fine to use on
table start tags (the possible values of which are a number denoting the width in pixels of
the table, and a percentage, which is a percentage of the parent element’s size). However,
the height attribute is nonstandard and fails in the majority of web browsers (in fact, if
using an XHTML DTD, it fails in every currently shipping mainstream browser), which might
come as something of a shock to those people who enjoy centering content in a browser
window by using a table.
As for setting widths and heights within table cells, that’s something that should be
avoided altogether—height and width attributes within table cells are deprecated. You
might argue that this is irrelevant—after all, all major browsers support these attributes.
Although this is true, deprecated attributes are not guaranteed to be supported in the
future. Also, table cells always expand to accommodate the widest or tallest element in a
row or column. As a result of this, defining heights and widths is often a futile attempt to
control the uncontrollable.

Collapsible page content : Setting up a collapsible div

1. Examine the script. Open collapsible-div.js. The code enables you to target any
div with a unique id value. Each time the script is run, it determines whether the
display value of the div is set to block (which makes it visible). If it is, the value is
set to none, thereby making it invisible. If it isn’t set to block (which means it’s set
to none), the script sets the value to block.
function swap(targetId){
if (document.getElementById)
{
target = document.getElementById(targetId);
if (target.style.display == "block")
{
target.style.display = "none";
}
else
{
target.style.display = "block";
}
}
}

2. Add a link. Add the code block shown following—when clicked, the link will toggle
the hidden content. The value within the onclick attribute (hiddenDiv, in this
case) is the id value of the div that this link will toggle.
<p><a href="#" title="Toggle section" onclick="toggleDiv('hiddenDiv');
å return false;">Toggle div!</o>

3. Add a div, and give it an id value equal to the onclick value from the previous
step. Within the div, add whatever content you want. The style attribute makes
the div initially hidden.
<p><a href="#" title="Toggle section" onclick="toggleDiv('hiddenDiv');
å return false;">Toggle div!</a></p>
<div id="hiddenDiv" style="display: none;">
<p>Initially hidden content goes here.</p>
</div>