Indent up and down with margin : Box Layout « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Box Layout

Indent up and down with margin

 

<!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">
* .moved-left {
  margin-left: -26px;
  background: red;
}

* .push-right {
  margin-right: 50px;
    background: gold;
}

* .moved-right {
  margin-left: 50px;
  background: yellow;
}

* .pull-left {
  margin-right: -20px;
  background: blue;
  color: white;
}

* .moved-down {
  margin-top: 20px;
  background: red;
}

* .push-down {
  margin-bottom: 20px;
  background: gary;
}

* .moved-up {
  margin-top: -13px;
  background: yellow;
  
}

* .pull-up {
  margin-bottom: -16px;
    background: pink;
}
</style>
</head>
<body>
<div> 
    <div class="moved-down center">Moved-down Static Block </div> 
    <div class="moved-up center">Moved-up Static Block</div> 
    <div class="push-down center">Push-down Static Block</div> 
    <div class="pull-up center">Pull-up Static Block</div> 
    <div class="center">None</div> 
</div> 
</body>
</html>








Related examples in the same category

1.Horizontally Stretched Static
2.Vertically Stretched Absolute
3.Horizontally Stretched Absolute
4.Indent the left and right sides of a static element
5.Move right and left with margin
6.Parent position: absolute, child position fixed or absolute
7.Parent position: relative, child position fixed or absolute
8.Parent position: absolute, child position: relative or static
9.Offset Absolute and Offset Fixed
10.Sized Block Outside to the Left of its parent
11.Sized Block Outside to the Right of its parent
12.Sized Float Outside Left to its parent
13.Sized Float Outside to the Right of its parent
14.Positioned parent and non-position child
15.Sized Absolute
16.Sized relative
17.Shrinkwrapped Absolute
18.Shrinkwrapped Relative
19.Static container and absolute child to top and left
20.Static postioned container and absolute child to the top and right
21.Static positioned container with child to the bottom and left
22.Static positioned container with child to the bottom and right
23.Relative positioned container with absolute positioned child to the top and left
24.Relative positioned container with absolute positioned child to the top and right
25.Relative positioned container with absolute positioned child to the bottom and left
26.Relative positioned container with absolute positioned child to the bottom and right