http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FBox_Model%2Fspan
HTML/CSS/Box Model/span - История изменений
2026-04-05T03:14:39Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/span&diff=5224&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Box_Model/span&diff=5225&oldid=prev
Admin: 1 версия
2010-05-26T08:16:38Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Background inline horizontal rule with image==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
padding-top: 5px;<br />
margin-top: 25px;<br />
margin-bottom: 0;<br />
width: auto;<br />
margin-left: 76px;<br />
margin-right: 76px;<br />
border: none;<br />
background: repeat-x left center url("http://www.wbex.ru/style/logo.png");<br />
background-color: transparent;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span class="myStyle"></span>Background inline horizontal rule. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Combination Inline horizontal rule.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
padding-top: 5px;<br />
margin-top: 25px;<br />
margin-bottom: 0;<br />
width: 400px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border-top: 4px ridge blue;<br />
border-bottom: 4px groove blue;<br />
background: repeat-x left center url("http://www.wbex.ru/style/logo.png");<br />
background-color: white;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span class="myStyle"></span>Combination Inline horizontal rule. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Default line space with margin 0==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
display: block;<br />
margin-top: 0;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span class="myStyle"></span>Normal linebreak. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Double-border inline horizontal rule.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
display: block;<br />
margin: 0;<br />
<br />
padding-top: 1px;<br />
margin-top: 25px;<br />
margin-bottom: 0;<br />
width: auto;<br />
margin-left: 0;<br />
margin-right: 0;<br />
border-top: 4px ridge blue;<br />
border-bottom: 4px groove blue;<br />
background: none;<br />
background-color: yellow;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span class="myStyle"></span>Double-border inline horizontal rule. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Horizontally Stretched Absolute SPAN==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#abs-h {<br />
width: auto;<br />
left: 0;<br />
right: 0;<br />
position: absolute;<br />
background: pink; <br />
}<br />
</style><br />
</head><br />
<body><br />
<span id="abs-h">Horizontally Stretched Absolute</span> <br />
</body><br />
</html> <br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Inline Decoration by border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
padding-left: 10px;<br />
font-size: 0.4em;<br />
vertical-align: middle;<br />
line-height: 24px;<br />
border-left: 20px groove black;<br />
border-right: 20px ridge black;<br />
margin-left: 3px;<br />
margin-right: 3px;<br />
background-color: lightgray;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul> <br />
<li>Insert patterned<span class="myStyle">&nbsp;</span> decoration.</li> <br />
<br />
</ul> <br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Inline Decoration solid==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .deco-solid {<br />
padding-left: 40px;<br />
font-size: 0.4em;<br />
vertical-align: middle;<br />
line-height: 24px;<br />
margin-left: 3px;<br />
margin-right: -15px;<br />
background-color: red;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul> <br />
<li>Insert colored<span class="deco-solid">&nbsp;</span> decoration.</li> <br />
<br />
</ul> <br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Inline Decoration with image==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
padding-left: 100px;<br />
font-size: 1em;<br />
vertical-align: -3px;<br />
line-height: 24px;<br />
margin-left: 3px;<br />
margin-right: 3px;<br />
background-image: url("http://www.wbex.ru/style/logo.png");<br />
background-position: top right;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div><br />
<ul> <br />
<li>Insert imaged<span class="myStyle">&nbsp;</span> decoration.</li> <br />
<br />
</ul> <br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Inline Spacer==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .space {<br />
margin-left: 2.5em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
this is a test. <span class="space"> </span>this is a test. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Inline vertical-align: bottom==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>vertical-align</title><br />
<style rel="stylesheet" type="text/css"><br />
p {<br />
font: 12px sans-serif;<br />
}<br />
span.line {<br />
border: 1px solid rgb(200, 200, 200);<br />
background: red;<br />
font-size: 100px;<br />
}<br />
span.line span {<br />
vertical-align: 300%;<br />
font-size: 20px;<br />
background: white;<br />
border: 1px solid black;<br />
}<br />
span#bottom {<br />
vertical-align: bottom;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p><br />
<span class="line"><br />
CSS<br />
<span id="bottom">Bottom</span><br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==inline vertical-align: middle==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>vertical-align</title><br />
<style rel="stylesheet" type="text/css"><br />
p {<br />
font: 12px sans-serif;<br />
}<br />
span.line {<br />
border: 1px solid rgb(200, 200, 200);<br />
background: red;<br />
font-size: 100px;<br />
}<br />
span.line span {<br />
vertical-align: 300%;<br />
font-size: 20px;<br />
background: white;<br />
border: 1px solid black;<br />
}<br />
span#middle {<br />
vertical-align: middle;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p><br />
<span class="line"><br />
CSS<br />
<span id="middle">Middle</span><br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Inline vertical-align: text-bottom==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>vertical-align</title><br />
<style rel="stylesheet" type="text/css"><br />
p {<br />
font: 12px sans-serif;<br />
}<br />
span.line {<br />
border: 1px solid rgb(200, 200, 200);<br />
background: red;<br />
font-size: 100px;<br />
}<br />
span.line span {<br />
vertical-align: 300%;<br />
font-size: 20px;<br />
background: white;<br />
border: 1px solid black;<br />
}<br />
span#text-bottom {<br />
vertical-align: text-bottom;<br />
} <br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p><br />
<span class="line"><br />
CSS<br />
<span id="text-bottom">Text Bottom</span><br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Inline vertical-align: text-top==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>vertical-align</title><br />
<style rel="stylesheet" type="text/css"><br />
p {<br />
font: 12px sans-serif;<br />
}<br />
span.line {<br />
border: 1px solid rgb(200, 200, 200);<br />
background: red;<br />
font-size: 100px;<br />
}<br />
span.line span {<br />
vertical-align: 300%;<br />
font-size: 20px;<br />
background: white;<br />
border: 1px solid black;<br />
}<br />
span#text-top {<br />
vertical-align: text-top;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p><br />
<span class="line"><br />
CSS<br />
<span id="text-top">Text Top</span><br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==inline vertical-align: top==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>vertical-align</title><br />
<style rel="stylesheet" type="text/css"><br />
p {<br />
font: 12px sans-serif;<br />
}<br />
span.line {<br />
border: 1px solid rgb(200, 200, 200);<br />
background: red;<br />
font-size: 100px;<br />
}<br />
span.line span {<br />
vertical-align: 300%;<br />
font-size: 20px;<br />
background: white;<br />
border: 1px solid black;<br />
}<br />
span#top {<br />
vertical-align: top;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p><br />
<span class="line"><br />
CSS<br />
<span id="top">Top</span><br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Invisible inline horizontal rule: a line-break.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
display: block;<br />
margin: 0;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span class="myStyle"></span>this is a test. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Line break with margin top==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
display: block;<br />
margin-top: -0.5em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span class="myStyle"></span>One-half linebreak. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==One and half Line break with margin-top: 1.5em==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
display: block;<br />
margin-top: 1.5em;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span class="myStyle"></span>One-and-a-half linebreak. <br />
</p> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==set span font size to .8em==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h1 span {<br />
font-size: .8em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="frame"><br />
<div id="banner"><br />
<h1>header 1<br /><span>span</span></h1><br />
</div><br />
<p>...</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Shrinkwrapped SPAN by setting both width and height to auto==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#float {<br />
width: auto;<br />
height: auto;<br />
float: left;<br />
background: red;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<span id="float">Shrinkwrapped Float</span> <br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==Span in a H2==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#h2 {<br />
position: relative;<br />
width: 250px;<br />
height: 76px;<br />
overflow: hidden;<br />
}<br />
#h2 span {<br />
position: absolute;<br />
width: 250px;<br />
height: 76px;<br />
left: 0;<br />
top: 0;<br />
background: url("http://www.wbex.ru/style/logo.png") no-repeat;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>Text Replacement</h1> <br />
<h2 id="h2" >Heading 2<span>This is a span.</span></h2> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==span in a h2 with absolute position==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
h2 {<br />
font:3em/1em Times, serif;<br />
font-weight: bold;<br />
margin:0;<br />
position: relative;<br />
overflow: hidden;<br />
float: left;<br />
}<br />
h2 span {<br />
position: absolute;<br />
width: 100%;<br />
height: 5em;<br />
background: url(striped.gif);<br />
}<br />
p {<br />
clear: left;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2><span>span</span>Header 2 Header 2 Header 2 Header 2 Header 2<br />
</h2><br />
<p>This is a test.</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==SPAN in anchor==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
a span {<br />
display: none;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<a href="/" id="linkhome"><br />
<span>Homepage</span><br />
</a<br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==span with id style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#boat {<br />
display: block;<br />
width: 207px;<br />
height: 123px;<br />
margin-left: 250px;<br />
margin-top: 75px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="content"><br />
<h2>header 2<br />
<span id="boat"><br />
</span><br />
</h2><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==span with vertical align==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
p {<br />
background: #ccc;<br />
margin: 10px;<br />
font-size: 16px;<br />
}<br />
span {<br />
font-weight: bold;<br />
background: lightblue;<br />
}<br />
span > span {<br />
font-size: 40px;<br />
color: white;<br />
background: steelblue;<br />
}<br />
span + span {<br />
font-size: 20px; <br />
}<br />
span#text-top {<br />
vertical-align: text-top;<br />
}<br />
span#top {<br />
vertical-align: top;<br />
}<br />
span#text-bottom {<br />
vertical-align: text-bottom;<br />
} <br />
span#bottom {<br />
vertical-align: bottom;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><br />
<span><br />
This is a test. <br />
<span id="text-top">top</span> <br />
<span id="top">top</span><br />
</span><br />
</p><br />
<p><br />
<span><br />
This is a test. <br />
<span id="text-bottom">bottom</span><br />
<span id="bottom">bottom</span><br />
</span><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==text-indent does not work on inline elements==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
* .myStyle {<br />
text-indent: 60px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<p><span class="myStyle">this is a test. </span></p> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==The span element can be used to group inline elements only.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Span</title><br />
</head><br />
<body><br />
<h1>Latest <span>Last updated on 11/22/2006</span></h1><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use SPAN to style Blocked area==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
address {<br />
border: 4px solid red;<br />
padding: 10px;<br />
}<br />
address * .name {<br />
display: block;<br />
}<br />
address * .address {<br />
display: block;<br />
}<br />
address * .area {<br />
display: block;<br />
}<br />
address * .emails {<br />
display: block;<br />
}<br />
</style><br />
</head><br />
<body><br />
<address> <br />
<span class="name">Name</span> <br />
<span class="address">Street</span> <br />
<span class="area"> <br />
<span class="locality">City</span>, <br />
<span class="region">State</span> <br />
<span class="postal-code">Zip</span> <br />
<span class="country-name" >Country</span> <br />
</span> <br />
<span class="emails"> <a class="email" href="mailto:n@i.ru">email</a> </span> <br />
</address> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==When vertically aligning inline elements,the vertical-align property can be: top, middle, bottom, text-top, text-bottom.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>vertical-align</title><br />
<style rel="stylesheet" type="text/css"><br />
p {<br />
font: 12px sans-serif;<br />
}<br />
span.line {<br />
border: 1px solid rgb(200, 200, 200);<br />
background: red;<br />
font-size: 100px;<br />
}<br />
span.line span {<br />
vertical-align: 300%;<br />
font-size: 20px;<br />
background: white;<br />
border: 1px solid black;<br />
}<br />
span#top {<br />
vertical-align: top;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p><br />
<span class="line"><br />
CSS<br />
<span id="top">Top</span><br />
</span><br />
</p><br />
</body><br />
</html><br />
</source></div>
Admin