Is Using Negative Margin With Social Sharing Buttons (Counters) Okay?

I have created a JSFiddle of my case here: http://jsfiddle.net/gGCaX/ (Please take a look, so as to get some idea of what I am about to ask.)

Now, coming to the point, Social Sharing buttons or counters are irregular when it comes to padding, margins etc as they come from different people.

As you can see in the JSFIDDLE, I've managed to get them look good together. But the problem is, for one of the buttons ("SHARE" button - - the last in the line) I had to use "negative" margin as it was leaving out lot of space behind (i.e., to its left).

.sharethisx {
    float: left;
    margin: 0 0 0 -10px !important;
    padding: 2px 0 0 !important;
    display: inline;
}

See the margin: 0 0 0 -10px !important;开发者_如何学编程 ?? I wouldn't have bothered if it was just about visibility. But these are counters, and they can grow to any number. So, will it be just fine in this case? Please advise.

---

You'll be fine in your case since you've applied a negative left margin to an element that's floated left. In this case (and for static elements as well) it will pull the element left, as you're seeing.

You start to run into unexpected behaviour with negative margins when you:

1. Apply them to the bottom of an element (pulls lower elements up).

2. Apply them to the right of an element (pulls following element to the left towards the element).

3. Apply them in the opposite direction of a float (creates a void that allows content to overlap the element). If the negative margin size is >= the element width, the element becomes completely overlapped.

Here's an article that gives a good description on how negative margins will work in different situations.

---

No problems, negative margin are allowed

As the w3c states: http://www.w3schools.com/cssref/pr_margin.asp Read the note "negative margin are allowed"

Good luck