HTML/CSS/Box Model/span

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

Background inline horizontal rule with image

   <source lang="html4strict">

<!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>

Background inline horizontal rule.

</body> </html> 

</source>


Combination Inline horizontal rule.

   <source lang="html4strict">

<!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>

Combination Inline horizontal rule.

</body> </html> 

</source>


Default line space with margin 0

   <source lang="html4strict">

<!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>

Normal linebreak.

</body> </html> 

</source>


Double-border inline horizontal rule.

   <source lang="html4strict">

<!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>

Double-border inline horizontal rule.

</body> </html> 

</source>


Horizontally Stretched Absolute SPAN

   <source lang="html4strict">

<!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">

  1. abs-h {
 width: auto;
 left: 0;
 right: 0;
 position: absolute;
 background: pink;

} </style> </head> <body> 

 Horizontally Stretched Absolute

</body> </html> 

</source>


Inline Decoration by border

   <source lang="html4strict">

<!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>

  • Insert patterned  decoration.

</body> </html> 

</source>


Inline Decoration solid

   <source lang="html4strict">

<!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>

  • Insert colored  decoration.

</body> </html> 

</source>


Inline Decoration with image

   <source lang="html4strict">

<!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>

  • Insert imaged  decoration.

</body> </html> 

</source>


Inline Spacer

   <source lang="html4strict">

<!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>

this is a test. this is a test.

</body> </html> 

</source>


Inline vertical-align: bottom

   <source lang="html4strict">

     <!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>

CSS Bottom 

       </body>
     </html>
</source>


inline vertical-align: middle

   <source lang="html4strict">

     <!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>

CSS Middle 

       </body>
     </html>
</source>


Inline vertical-align: text-bottom

   <source lang="html4strict">

     <!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>

CSS Text Bottom 

       </body>
     </html>
</source>


Inline vertical-align: text-top

   <source lang="html4strict">

     <!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>

CSS Text Top 

       </body>
     </html>
</source>


inline vertical-align: top

   <source lang="html4strict">

     <!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>

CSS Top 

       </body>
     </html>
</source>


Invisible inline horizontal rule: a line-break.

   <source lang="html4strict">

<!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>

this is a test.

</body> </html> 

</source>


Line break with margin top

   <source lang="html4strict">

<!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>

One-half linebreak.

</body> </html> 

</source>


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

   <source lang="html4strict">

<!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>

One-and-a-half linebreak.

</body> </html> 

</source>


set span font size to .8em

   <source lang="html4strict">

<!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>

...

</body> </html> 

</source>


Shrinkwrapped SPAN by setting both width and height to auto

   <source lang="html4strict">

<!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">

  1. float {
 width: auto;
 height: auto;
 float: left;
 background: red;

}

</style> </head> <body> 

 Shrinkwrapped Float

</body> </html> 

</source>


Span in a H2

   <source lang="html4strict">


<?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">
  1. h2 {
 position: relative;
 width: 250px;
 height: 76px;
 overflow: hidden;

}

  1. 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>

Text Replacement

Heading 2This is a span.

  </body>

</html> 

</source>


span in a h2 with absolute position

   <source lang="html4strict">

<!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>

spanHeader 2 Header 2 Header 2 Header 2 Header 2

This is a test.

</body> </html> 

</source>


SPAN in anchor

   <source lang="html4strict">

<!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">
  Homepage
 </a

</body> </html> 

</source>


span with id style

   <source lang="html4strict">

<!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">

  1. boat {
display: block;
width: 207px;
height: 123px;
margin-left: 250px;
margin-top: 75px;

} </style> </head> <body>

header 2

</body> </html> 

</source>


span with vertical align

   <source lang="html4strict">

<!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>

This is a test. top top

This is a test. bottom bottom 

       </body>
   </html>
</source>


text-indent does not work on inline elements

   <source lang="html4strict">

<!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>

this is a test.

</body> </html> 

</source>


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

   <source lang="html4strict">

<!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>

Latest Last updated on 11/22/2006

</body> </html> 

</source>


Use SPAN to style Blocked area

   <source lang="html4strict">

<!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> 

   Name 
   Street 
    
       City, 
       State 
       Zip 
       Country 
    
    <a class="email" href="mailto:n@i.ru">email</a>

</address>

</body> </html> 

</source>


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

   <source lang="html4strict">


     <!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>

CSS Top 

       </body>
     </html>
</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/span&oldid=5225»