HTML/CSS/Box Model/span

Материал из Web эксперт
Перейти к: навигация, поиск

Background inline horizontal rule with image

 

<!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">
* .myStyle {
  padding-top: 5px;
  margin-top: 25px;
  margin-bottom: 0;
  width: auto;
  margin-left: 76px;
  margin-right: 76px;
  border: none;
  background: repeat-x left center url("http://www.wbex.ru/style/logo.png");
  background-color: transparent;
}
</style>
</head>
<body>
<p>
<span class="myStyle"></span>Background inline horizontal rule. 
</p> 
</body>
</html>



Combination Inline horizontal rule.

 
<!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">
* .myStyle {
  padding-top: 5px;
  margin-top: 25px;
  margin-bottom: 0;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  border-top: 4px ridge blue;
  border-bottom: 4px groove blue;
  background: repeat-x left center url("http://www.wbex.ru/style/logo.png");
  background-color: white;
}

</style>
</head>
<body>
<p>
<span class="myStyle"></span>Combination Inline horizontal rule. 
</p> 
</body>
</html>



Default line space with margin 0

 

<!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">
* .myStyle {
  display: block;
  margin-top: 0;
}

</style>
</head>
<body>
<p>
<span class="myStyle"></span>Normal linebreak. 
</p> 
</body>
</html>



Double-border inline horizontal rule.

 

<!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">
* .myStyle {
  display: block;
  margin: 0;
  
  padding-top: 1px;
  margin-top: 25px;
  margin-bottom: 0;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  border-top: 4px ridge blue;
  border-bottom: 4px groove blue;
  background: none;
  background-color: yellow;
}
</style>
</head>
<body>
<p>
<span class="myStyle"></span>Double-border inline horizontal rule. 
</p> 
</body>
</html>



Horizontally Stretched Absolute SPAN

 
<!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></title>
<style type="text/css">
#abs-h {
  width: auto;
  left: 0;
  right: 0;
  position: absolute;
  background: pink;  
}
</style>
</head>
<body>
  <span id="abs-h">Horizontally Stretched Absolute</span> 
</body>
</html>



Inline Decoration by border

 

<!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">
* .myStyle {
  padding-left: 10px;
  font-size: 0.4em;
  vertical-align: middle;
  line-height: 24px;
  border-left: 20px groove black;
  border-right: 20px ridge black;
  margin-left: 3px;
  margin-right: 3px;
  background-color: lightgray;
}
</style>
</head>
<body>
<div>
    <ul> 
    <li>Insert patterned<span class="myStyle">&nbsp;</span> decoration.</li> 
    
    </ul> 
</div> 
</body>
</html>



Inline Decoration solid

 

<!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">
* .deco-solid {
  padding-left: 40px;
  font-size: 0.4em;
  vertical-align: middle;
  line-height: 24px;
  margin-left: 3px;
  margin-right: -15px;
  background-color: red;
}
</style>
</head>
<body>
<div>
    <ul> 
    <li>Insert colored<span class="deco-solid">&nbsp;</span> decoration.</li> 
    
    </ul> 
</div> 
</body>
</html>



Inline Decoration with image

 

<!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">
* .myStyle {
  padding-left: 100px;
  font-size: 1em;
  vertical-align: -3px;
  line-height: 24px;
  margin-left: 3px;
  margin-right: 3px;
  background-image: url("http://www.wbex.ru/style/logo.png");
  background-position: top right;
}
</style>
</head>
<body>
<div>
    <ul> 
    <li>Insert imaged<span class="myStyle">&nbsp;</span> decoration.</li> 
    
    </ul> 
</div> 
</body>
</html>



Inline Spacer

 
<!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">
* .space {
  margin-left: 2.5em;
}
</style>
</head>
<body>
<p>
    this is a test. <span class="space"> </span>this is a test. 
</p> 
</body>
</html>



Inline vertical-align: bottom

 
      <!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">
          <head>
              <title>vertical-align</title>
              <style rel="stylesheet" type="text/css">
      p {
          font: 12px sans-serif;
      }
      span.line {
          border: 1px solid rgb(200, 200, 200);
          background: red;
          font-size: 100px;
      }
      span.line span {
          vertical-align: 300%;
          font-size: 20px;
          background: white;
          border: 1px solid black;
      }
      span#bottom {
          vertical-align: bottom;
      }
    
              </style>
          </head>
          <body>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="bottom">Bottom</span>
                  </span>
           </p>
        </body>
      </html>



inline vertical-align: middle

 
      <!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">
          <head>
              <title>vertical-align</title>
              <style rel="stylesheet" type="text/css">
      p {
          font: 12px sans-serif;
      }
      span.line {
          border: 1px solid rgb(200, 200, 200);
          background: red;
          font-size: 100px;
      }
      span.line span {
          vertical-align: 300%;
          font-size: 20px;
          background: white;
          border: 1px solid black;
      }
      span#middle {
          vertical-align: middle;
      }
    
              </style>
          </head>
          <body>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="middle">Middle</span>
                  </span>
           </p>
        </body>
      </html>



Inline vertical-align: text-bottom

 
      <!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">
          <head>
              <title>vertical-align</title>
              <style rel="stylesheet" type="text/css">
      p {
          font: 12px sans-serif;
      }
      span.line {
          border: 1px solid rgb(200, 200, 200);
          background: red;
          font-size: 100px;
      }
      span.line span {
          vertical-align: 300%;
          font-size: 20px;
          background: white;
          border: 1px solid black;
      }
      span#text-bottom {
          vertical-align: text-bottom;
      }  
    
              </style>
          </head>
          <body>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="text-bottom">Text Bottom</span>
                  </span>
           </p>
        </body>
      </html>



Inline vertical-align: text-top

 
      <!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">
          <head>
              <title>vertical-align</title>
              <style rel="stylesheet" type="text/css">
      p {
          font: 12px sans-serif;
      }
      span.line {
          border: 1px solid rgb(200, 200, 200);
          background: red;
          font-size: 100px;
      }
      span.line span {
          vertical-align: 300%;
          font-size: 20px;
          background: white;
          border: 1px solid black;
      }
      span#text-top {
          vertical-align: text-top;
      }
    
              </style>
          </head>
          <body>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="text-top">Text Top</span>
                  </span>
           </p>
        </body>
      </html>



inline vertical-align: top

 
      <!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">
          <head>
              <title>vertical-align</title>
              <style rel="stylesheet" type="text/css">
      p {
          font: 12px sans-serif;
      }
      span.line {
          border: 1px solid rgb(200, 200, 200);
          background: red;
          font-size: 100px;
      }
      span.line span {
          vertical-align: 300%;
          font-size: 20px;
          background: white;
          border: 1px solid black;
      }
      span#top {
          vertical-align: top;
      }
    
              </style>
          </head>
          <body>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="top">Top</span>
                  </span>
           </p>
        </body>
      </html>



Invisible inline horizontal rule: a line-break.

 
<!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">
* .myStyle {
  display: block;
  margin: 0;
}
</style>
</head>
<body>
<p>
<span class="myStyle"></span>this is a test. 
</p> 
</body>
</html>



Line break with margin top

 
<!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">
* .myStyle {
  display: block;
  margin-top: -0.5em;
}
</style>
</head>
<body>
<p>
<span class="myStyle"></span>One-half linebreak. 
</p> 
</body>
</html>



One and half Line break with margin-top: 1.5em

 
<!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">
* .myStyle {
  display: block;
  margin-top: 1.5em;
}

</style>
</head>
<body>
<p>
<span class="myStyle"></span>One-and-a-half linebreak. 
</p> 
</body>
</html>



set span font size to .8em

 
<!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></title>
<style type="text/css">
h1 span {
 font-size: .8em;
}
</style>
</head>
<body>
  <div id="frame">
   <div id="banner">
    <h1>header 1<br /><span>span</span></h1>
   </div>
   <p>...</p>
  </div>
</body>
</html>



Shrinkwrapped SPAN by setting both width and height to auto

 

<!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></title>
<style type="text/css">
#float {
  width: auto;
  height: auto;
  float: left;
  background: red;
}

</style>
</head>
<body>
  <span id="float">Shrinkwrapped Float</span> 
</body>
</html>



Span in a H2

 


<?xml version = "1.0"?>
<!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>
      <title></title>
      <style type="text/css">
#h2 {
  position: relative;
  width: 250px;
  height: 76px;
  overflow: hidden;
}
#h2 span {
  position: absolute;
  width: 250px;
  height: 76px;
  left: 0;
  top: 0;
  background: url("http://www.wbex.ru/style/logo.png") no-repeat;
}
</style>
   </head>
   <body>
<h1>Text Replacement</h1> 
<h2 id="h2" >Heading 2<span>This is a span.</span></h2> 
   </body>
</html>



span in a h2 with absolute position

 
<!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></title>
<style type="text/css">
h2 {
 font:3em/1em Times, serif;
 font-weight: bold;
 margin:0;
 position: relative;
 overflow: hidden;
 float: left;
}
h2 span {
 position: absolute;
 width: 100%;
 height: 5em;
 background: url(striped.gif);
}
p {
 clear: left;
}
</style>
</head>
<body>
<h2><span>span</span>Header 2 Header 2 Header 2 Header 2 Header 2
</h2>
  <p>This is a test.</p>
</body>
</html>



SPAN in anchor

 
<!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></title>
<style type="text/css">
a span {
 display: none;
}

</style>
</head>
<body>
  <a href="/" id="linkhome">
   <span>Homepage</span>
  </a
  
</body>
</html>



span with id style

 
<!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></title>
<style type="text/css">
#boat {
 display: block;
 width: 207px;
 height: 123px;
 margin-left: 250px;
 margin-top: 75px;
}
</style>
</head>
<body>
  <div id="content">
     <h2>header 2
      <span id="boat">
      </span>
     </h2>
    </div>
</body>
</html>



span with vertical align

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type="text/css">
                p {
                    background: #ccc;
                    margin: 10px;
                    font-size: 16px;
                }
                span {
                    font-weight: bold;
                    background: lightblue;
                }
                span > span {
                    font-size: 40px;
                    color: white;
                    background: steelblue;
                }
                span + span {
                    font-size: 20px;   
                }
                span#text-top {
                    vertical-align: text-top;
                }
                span#top {
                    vertical-align: top;
                }
                span#text-bottom {
                    vertical-align: text-bottom;
                }               
                span#bottom {
                    vertical-align: bottom;
                }
            </style>
        </head>
        <body>
            <p>
                <span>
                    This is a test. 
                        <span id="text-top">top</span> 
                        <span id="top">top</span>
                </span>
            </p>
            <p>
                <span>
                    This is a test. 
                        <span id="text-bottom">bottom</span>
                        <span id="bottom">bottom</span>
                </span>
            </p>
        </body>
    </html>



text-indent does not work on inline elements

 
<!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">
* .myStyle {
  text-indent: 60px;
}
</style>
</head>
<body>
<p><span class="myStyle">this is a test. </span></p> 

</body>
</html>



The span element can be used to group inline elements only.

 
<!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>Span</title>
</head>
<body>
  <h1>Latest <span>Last updated on 11/22/2006</span></h1>
</body>
</html>



Use SPAN to style Blocked area

 
<!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">
address {
  border: 4px solid red;
  padding: 10px;
}
address * .name {
  display: block;
}
address * .address {
  display: block;
}
address * .area {
  display: block;
}
address * .emails {
  display: block;
}
</style>
</head>
<body>
<address> 
    <span class="name">Name</span> 
    <span class="address">Street</span> 
    <span class="area"> 
        <span class="locality">City</span>, 
        <span class="region">State</span> 
        <span class="postal-code">Zip</span> 
        <span class="country-name" >Country</span> 
    </span> 
    <span class="emails"> <a class="email" href="mailto:n@i.ru">email</a> </span> 
</address> 

</body>
</html>



When vertically aligning inline elements,the vertical-align property can be: top, middle, bottom, text-top, text-bottom.

 

      <!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">
          <head>
              <title>vertical-align</title>
              <style rel="stylesheet" type="text/css">
      p {
          font: 12px sans-serif;
      }
      span.line {
          border: 1px solid rgb(200, 200, 200);
          background: red;
          font-size: 100px;
      }
      span.line span {
          vertical-align: 300%;
          font-size: 20px;
          background: white;
          border: 1px solid black;
      }
      span#top {
          vertical-align: top;
      }
    
              </style>
          </head>
          <body>
             
              <p>
                  <span class="line">
                  CSS
                      <span id="top">Top</span>
                  </span>
           </p>
        </body>
      </html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/span&oldid=5225»