The margin property of CSS defines the spacing surrounding the outside of elements. Margins have no background color and it will be transparent as well. However, the normal possible values of margin in CSS are measured in auto, length, percentage and inherit. However, in this particular article, we are going to discuss about the negative margin or negative margin spacing and common problems with it. Browsers like IE, Firefox and Chrome will also be considered here.
Each and every developer works with it, but the tale of negative margin always remains untold. However, let us look at the point straight away. Everyone uses the margins in CSS, but the use of negative margin can be controversial. Some people may love it and other may hate it as well. Here is an example of negative margin.
#content {margin-left:-110px;}
In general, negative margins are used in small segments, even though it is capable of a lot of tasks you don’t normally think of. Here we will be discussing from the point of view of different developers regarding using negative margins.
Some people say that negative margin is not valid and it is considered a hack. Others say that it is not compatible and it will not go with the flow of the page, and can cause problems later when thinking about responsive design.
However, we can assure you that the use of negative margin spacing is completely valid. It is not considered a hack and when used properly can go a long way.
Float + Margin
While applying floating, the developer should be cautious as the language may react differently. There are actually two types of work done with the negative margins. One way will be working with the static elements and another will be working with the floating. Float can sometimes cause problem, most notably in Firefox and Chrome. For instance:
/* Moves the element 10px upwards */
#mydiv1 {
margin-top:-10px;
float: right;
}
This will likely cause some of the problems where the negative margin doesn’t seem to work
Try this instead:
/* Moves the element 10px upwards */
#mydiv1 {
margin-top:-10px;
float: right;
position: relative;
}
That should fix the problem for all modern browsers
Negative margins do not work with tables
If you’ve got a simple HTML table, negative margins won’t do anything when applied to TD or TR elements. It will work for the overall table itself though.
table {margin-top: -15px;}
If you want to still use negative margins in your TD or TR, then the solution here is to do the following:
td {
position: relative;
top: -45px;
}
That will do the trick for your individual elements inside the tables.
Keep It Simple
The last piece of advice if your negative margin is not working is to do the opposite of what you were intending, so instead of:
#element { margin-top: -10px;}
If that’s not working, give this a try:
#element { margin-bottom: 10px;}
Sometimes in the scurry of web designing, we don’t try the simplest thing.