HTML/CSS/Text/line height
Содержание
- 1 Different line height with various measurements
- 2 Examples of font-size and line-height
- 3 Interlinear space
- 4 line-height: 150%; assigns 150% of the font-size to line-height.
- 5 Padding sets apart text to emphasize it and line-height
- 6 Proportional line heights
- 7 Set line height to 1.5
- 8 Set line height to 1em
Different line height with various measurements
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
body {
font-size: 12px;
}
p {
width: 400px;
}
.one {
line-height: normal;
}
.two {
line-height: 18px;
}
.three {
line-height: 1.5em;
}
.four {
line-height: 1.9ex;
}
</style>
</head>
<body>
<p class="one">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p class="two">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p class="three">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
<p class="four">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</body>
</html>
Examples of font-size and line-height
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Examples of font-size and line-height</title>
<style type="text/css">
body {
font-size: 12px;
}
h1 {
font-size: 1em;
line-height: 1.5;
font-weight: bold;
margin: 1em 0 0 0;
}
p {
margin: 0;
width: 33em;
}
p.one {
font-size: 1em;
line-height: 1.5em;
}
p.two {
font-size: 1.2em;
line-height: 1.5em;
}
</style>
</head>
<body>
<h1>Size: 1em, line-height: 1.5em</h1>
<p class="one">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
<h1>Size: 1.2em, line-height: 1.5em</h1>
<p class="two">
this is a test. this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</body>
</html>
Interlinear space
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Interlinear space</title>
<style type="text/css">
body {
font-size: 12px;
}
h1 {
font: Bold 1em/1.5em Georgia, serif;
margin: 2em 0 0 0;
padding: 0;
}
p {
margin: 0;
width: 33em;
}
.with-space {
line-height: 1.5em;
}
</style>
</head>
<body>
<h1>Default (line-height unspecified)</h1>
<p>this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
<h1>line-height: 1.5em</h1>
<p class="with-space">
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</body>
</html>
line-height: 150%; assigns 150% of the font-size to line-height.
<!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">
<head>
<title>Set text indent to 37%</title>
<style type="text/css">
p {
text-indent: 37%;
line-height: 150%;
}
</style>
</head>
<body>
<p>
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
</p>
</body>
</html>
Padding sets apart text to emphasize it and line-height
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .padded-mild {
padding-left: 1em;
padding-right: 1em;
line-height: 1em;
}
* .padded-emphasized {
padding-left: 2em;
padding-right: 2em;
line-height: 2em;
}
* .padded-strong {
padding-left: 3em;
padding-right: 3em;
line-height: 3em;
}
* .padded-extreme {
padding-left: 4em;
padding-right: 4em;
line-height: 4em;
}
</style>
</head>
<body>
<p><br /><span class="padded-mild">a letter...</span>→
<br /><span class="padded-emphasized">a word...</span>→
<br /><span class="padded-strong">a phrase...</span>→
<br /><span class="padded-extreme">a paragraph...</span>→ etc.
</p>
</body>
</html>
Proportional line heights
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>A basic example with proportional line heights</title>
<style type="text/css" media="screen">
html {
font-size: 100%;
}
body {
padding: 20px;
font-size: 62.5%;
}
#wrapper {
margin: 0 auto;
width: 400px;
}
body {
line-height: 1.5;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.2em;
margin-top: 1.65em;
}
p {
font-size: 1.1em;
margin-bottom: 1.1em;
}
h3, p {
margin-left: 1em;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<h2>Curabitur sit amet risus</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<h3>Praesent rutrum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
<h3>Habitant morbid</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet elementum erat. Integer diam mi, venenatis non, cursus a, hendrerit at, mi. Morbi risus mi, tincidunt ornare, tempus ut, eleifend nec, risus.</p>
</div>
</body>
</html>
Set line height to 1.5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title></title>
<style type="text/css">
body {
font-size: 62.5%;
margin: 10% 10% 20% 10%;
}
h1 {
font-size: 2.5em;
width: 66.6%;
margin: 0 0 0.1em 0;
}
p {
margin: 0 0 1em 0;
font-size: 1.2em;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="frame">
<h1>Header 1</h1>
<p>This is a test.</p>
</div>
</body>
</html>
Set line height to 1em
<!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">
<head>
<title>Set text indent to 37%</title>
<style type="text/css">
p {
text-indent: 37%;
line-height: 1em;
}
p span.initcap {
font-size: 6em;
line-height: 0.6em;
font-weight: bold;
}
</style>
</head>
<body>
<p><span class="initcap">O</span>nline. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
This is test. This is test. This is test. This is test. This is test.
</p>
</body>
</html>