Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Negative margin different result on safari than any other browser

Tags:

css

CSS:

dd
{
    margin: -1.2em 4em 0 1em;
}

This is the only CSS rule applied. The negative margin is pushing it more to the top on Safari than on any other browser. I have tested it with Chrome and Firefox (all on Mac OS X).

How could I make it behave the same on all browsers?

like image 947
Abdelrahman Osama Avatar asked Jul 06 '11 22:07

Abdelrahman Osama


People also ask

Is it bad practice to use negative margins CSS?

The downside of negative margins is they are difficult to debug and will make your CSS harder to read. The most often misuses of negative margins that I encounter is when it is used to make up for incorrect layouts elsewhere on the site. This is indeed bad practice.

Is it good to use negative margin?

It does not break the flow of the page if applied to elements without floats. So if you use a negative margin to nudge an element upwards, all succeeding elements will be nudged as well. It is highly compatible. Negative margins are wholly supported across all modern browsers (and IE6 in most cases).

Can we give negative values in margin & padding?

No. Padding only takes positive values. Negatives are ignored or treated as 0, which would have the same effect: none. Margins can have negative values, as can other position related properties, but not padding.


1 Answers

use display:block; on your element to make Safari see it the same as in FF, IE and Chrome.

like image 170
DD dev Avatar answered Sep 24 '22 00:09

DD dev