There are a lot of times when you want something to just be a few pixels higher than it is. Unfortunately for you the container of that element starts to soon. So you need to move it outside of the box. Your options in CSS? You can either use relative positioning or you can use negative margin. I’ll go over in another article so for now we will discuss the handy ability to use negative margin on objects.Using negative margin definitely isn’t complicated but most people don’t even know it is possible. The idea is simple, instead of using a positive number to assign the margin of an element you can use negative margin to take that element outside of its container. This can be handy for all kinds of things, especially if you are just moving an object a few pixels.

1

#headerContainer {margin-top: -4px;}

It is as simple as that and you can adjust an object to be nearly anywhere you want it to be. The only issue you may run in to is that the object you are trying to place may not be a block-level element and therefore may have trouble getting it to work cross-browsers without floating it or assigning its display attribute to block.

1

#headerContainer {margin-top: -4px;display: block; width: 800px;}

Sorry for the short and sweet post, spent too much of the weekend migrating my blog over to Wordpress and testing everything to make sure it works. I’ll try and post another CSS article later today, everything is frozen here in Oklahoma so I think I’ll be staying home to avoid car wrecks and curb accidents.

Popularity: 7%