Professional Documents
Culture Documents
1
1
gif" width="9"
<!DOCTYPE html> height="9"> image with a text-top alignment.</p>
<html> <h2>vertical-align: text-bottom:</h2>
<head> <p>An <img class="c" src="sqpurple.gif" width="9"
<style> height="9"> image with a text-bottom alignment.</p>
body { <h2>vertical-align: sub:</h2>
background-color: lightgrey; <p>An <img class="d" src="sqpurple.gif" width="9"
color: blue; height="9"> image with a sub alignment.</p>
} <h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9"
h1 { height="9"> image with a super alignment.</p>
background-color: black; </body>
color: white; </html>
} 3.
<!DOCTYPE html>
div { <html>
background-color: blue; <head>
color: white; <style>
} h1 {
</style> text-decoration: underline;
</head> }
<body> h2 {
text-decoration: underline red;
<h1>This is a Heading</h1> }
<p>This page has a grey background color and a blue h3 {
text.</p> text-decoration: underline red double;
<div>This is a div.</div> }
p{
</body> text-decoration: underline red double 5px;
</html> }
2. </style>
<!DOCTYPE html> </head>
<html> <body>
<head> <h1>Heading 1</h1>
<style> <h2>Heading 2</h2>
img.a { <h3>Heading 3</h3>
vertical-align: baseline; <p>A paragraph.</p>
}
img.b { </body>
vertical-align: text-top; </html>
} 4.
<!DOCTYPE html>
img.c { <html>
vertical-align: text-bottom; <head>
} <style>
h1 {
img.d { text-decoration-line: underline;
vertical-align: sub; text-decoration-thickness: auto; /* this is default */
} }
img.e { h2 {
vertical-align: super; text-decoration-line: underline;
} text-decoration-thickness: 5px;
</style> }
</head>
<body> h3 {
text-decoration-line: underline;
<h1>The vertical-align Property</h1> text-decoration-thickness: 25%;
}
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" p{
height="9"> image with a default alignment.</p> text-decoration-line: underline;
text-decoration-color: blue;
<h2>vertical-align: text-top:</h2> text-decoration-style: double;
text-decoration-thickness: 5px; <p class="one">This is a paragraph with larger word
} spacing.</p>
</style>
</head> <p class="two">This is a paragraph with smaller word
<body> spacing.</p>
<h1>Using word-spacing</h1>