How to change the line-height on my text with CSS

You can use the CSS line-height property when the default space between lines of text box looks a little narrow. The next CSS code shows this.

File test.css
p {

font: 16px Arial, Geneva, Helvetica, sans-serif;

line-height: 2.0;

}

Note: You can specify the line-height using standard CSS units of measurement, such as ems or pixels, but doing so breaks the link between the line height and the font size for child element.

The test file is the following:

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to change the line-height on my text with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<h1>Obama Joins Romney in Hunt for Slimmest Electoral Edge</h1>

<p>President Barack Obama and Republican Mitt Romney crisscrossed the election battleground states hunting for a path to 270 electoral votes on the final weekend of their campaigns.

The slim margins in the presidential race were demonstrated in their attention toIowa, a state with just six Electoral College votes and where a closely watched poll in the swing state of Iowa showed the incumbent ahead there.

Obama leads his Republican challenger 47 percent to 42 percent among likely Iowa voters, according to the Des Moines Register&#39;s Iowa Poll, which was released last night. </p>

</body>

</html>

And the result is:

 

Changing of the line-height on my text with CSS

Changing of the line-height on my text with CSS