When the top and bottom offset properties are applied to the same element, height is implied. : top « CSS « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » CSS » top 




When the top and bottom offset properties are applied to the same element, height is implied.
   
<!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>Opposing Offset Properties</title>
<style type='text/css'>
body {
    font: 12px sans-serif;
    background: lightyellow;
}
div#offset-four {
    background: yellow;
    border: 1px solid rgb(128128128);
    position: absolute;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}
{
    margin: 0;
    padding: 5px;
    border: 1px solid black;
}
p#offset-y {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    width: 100px;
    background: khaki;
}

</style>


    </head>
    <body>
        <div id='offset-four'>
            <p id='offset-y'>
                When the top and bottom offset properties are applied to the same
                element, height is implied.
            </p>

        </div>
    </body>
</html>

   
    
    
  














Related examples in the same category
1.'top' Example
2.top: 100px
3.top:-100px;
4.Using top and left to create offset
5.Use 'top' to offset the top of an element from the top of its position.
6.top aligns the top side of an absolute element to the top side of its container.
7.Body top left position
8.Offset Relative
9.Relative offset indent
10.Absolute Outside its parent on the Bottom Left with 100% top
11.Absolute position with top, right and bottom
12.Relative block to top and left
13.position: relative and top left offset
14.top: -100px
15.Relative negative top offset
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.