On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it. : Inline Elements « Style Basics « 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 » Style Basics » Inline Elements 




On an inline-block element, a positive value in margin-top expands the height of the line and a negative value shrinks it.
 

<!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">
.container{
    width: 800px;
    height: 800px;
    background: pink;
}
* .box {
  float: right;
  overflow: auto;
  visibility: visible;
  width: auto;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}

* .small {
    position: absolute;
    margin-top: 10%;
    background: yellow;  
}
</style>
</head>
<body>
  <div class="container"
        <img class="small" src="http://www.java2s.com/style/logo.png" alt="star"/>    
  </div> 
</body>
</html

 














Related examples in the same category
1.CSS provides the following properties for styling inline boxes:
2.Inline Elements list
3.Inline Box
4.Shrinkwrapped inline block by setting both width and height to auto
5.Block-level elements
6.inline element is floated
7.float inline block becomes block of multiline inline box
8.float inline with block inline padding
9.float inline elements becomes block
10.Middle Offset INLINE
11.Shrinkwrapped Absolute right aligned
12.Stretched Absolute in relative positioned parent
13.Middle Aligned INLINE
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.