span border: 1px solid black; : span « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. span

span border: 1px solid black;

     

<!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 type='text/css'>
p {
    font: 12px sans-serif;
}
span.line {
    border: 1px solid rgb(200, 200, 200);
    background: rgb(244, 244, 244);
    font-size: 100px;
}
span.line span {
    vertical-align: 300%;
    font-size: 20px;
    background: white;
    border: 1px solid black;
}
span#top {
    vertical-align: top;
}
span#middle {
    vertical-align: middle;
}
span#bottom {
    vertical-align: bottom;
}
span#text-top {
    vertical-align: text-top;
}
span#text-bottom {
    vertical-align: text-bottom;
}
</style>


    </head>
    <body>
        <p>
            The vertical-align property is used in two scenarios: to
            vertically align inline elements with respect to the line
            box, and to vertically align the contents of table cells.
        </p>
        <p>
            When vertically aligning inline elements within a line box,
            the vertical-align property can be used with the keywords
            top, middle, bottom, text-top, text-bottom.
        </p>
        <p>
            <span class='line'>
                Gg
                <span id='top'>Top</span>
                <span id='middle'>Middle</span>
                <span id='bottom'>Bottom</span>
                <span id='text-top'>Text Top</span>
                <span id='text-bottom'>Text Bottom</span>
            </span>
        </p>
    </body>
</html>








Related examples in the same category

1.'span' Example
2.span line-height: 0.6em;
3.span display: none;
4.span float: right;
5.span inside a h2
6.Empty span with background image
7.Using span to highlight one letter
8.Using span to create author part of a quotation
9.Using span to highlight
10.Span inside a DIV
11.Span padding: 0 57px;
12.Span color: #786B50;
13.Span display: block;
14.Span float: left;
15.Span letter-spacing: 6px;
16.Span width: 1000px;
17.Span position: absolute;
18.Span top: 206px;
19.Span left: 86px;
20.Span color: #140A00
21.Let DIV span two columns
22.span with class selector
23.span padding: 0 10px;
24.span background: mistyrose;
25.span float left
26.span border: 1px solid rgb(200, 200, 200);
27.span background: rgb(244, 244, 244);
28.span background: white;
29.Using span to create quotation
30.span.color {color:#FF0000;}
31.Capital first letter with span
32.Style a letter with span
33.Inline style for Span
34.The span element can be used to group inline elements only.
35.span with id style
36.Inline Spacer
37.Inline Decoration solid
38.Inline Decoration by border
39.Inline Decoration with image
40.span in a h2 with absolute position
41.SPAN in anchor
42.Span in a H2
43.Shrinkwrapped SPAN by setting both width and height to auto
44.Horizontally Stretched Absolute SPAN
45.Line break with margin top
46.Default line space with margin 0
47.One and half Line break with margin-top: 1.5em
48.Invisible inline horizontal rule: a line-break.
49.Double-border inline horizontal rule.
50.Background inline horizontal rule with image
51.Combination Inline horizontal rule.
52.Use SPAN to style Blocked area
53.Absolute centered