Geeks With Blogs
Stephanie Grima C#, ASP.NET and my life.

 

CSS: Negative Margins

We have already dealt with margins, and how they work. I also mentioned Negative Margins in Part 2 and I promise to deal with them. And here is a short article on examples and reasons why one should use them!

Negative margins are used to create effects such as:

  1. over-lapping
  2. to create 3D effects

So how do these Negative Margins work? It works exactly the opposite way the positive values work in margins.

The following is an example of making use of these negative margins.

CSS:

p
{
margin:20px 0;
height:40px;
width:200px;
margin-left:55px;
background:#CCFF99;
border:1px dotted #000;
padding-left:15px;
padding-top:15px;
}

p.bottom 
{
margin:-35px 0 20px 20px;
background:#FFCCFF
}

p.center
{
margin:-95px 0 30px 180px;
border:2px solid #FFFFCC;
background:none; width:50px;
}

HTML:

<p> Hello! </p>
<p class="bottom"> I am Steffi! </p>
<p class="center"> </p>

This is the way it should appear:

img148/8295/93575657ly6.png

Goodluck!

 

Posted on Wednesday, November 5, 2008 6:19 AM HTML / CSS | Back to top


Comments on this post: Part 3: Negative Margin: Property [CSS]

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Steffi | Powered by: GeeksWithBlogs.net