Is negative margin a bad practice?

Asked

Viewed 2,918 times

4

Use a margin with negative value is a bad practice (bad acting)?

Example:

margin-top: -3px;
css
  • 1

    Bad practice based on what?

  • @jbueno I believe that there are possibilities to position an element without using the negative value, but I do not know if using this method is a bad practice.

  • 1

    I think @jbueno is trying to say that this "good practice" /"bad practice" thing is supposed to be relativized. Blindly following a "good practice" does not guarantee good code, just as never using any "bad practice" also does not guarantee anything.

  • @vnbrs the question has nothing to do with [tag:encoding-style], the problem is the effect caused by the negative value and only, encoding-style refers to the "understanding of the code" and not the execution of it.

  • Arthur, none of the answers talked in detail about the box-model, I can’t answer anymore, but to say, there is no such thing as bad practice with negative values in CSS, a box-model can vary and so the effect of margin or spacing can also vary, there are countless reasons to use negative values, so it is not a bad practice, you use when necessary, if it is not necessary do not use. (no more details can be given due to limited comments size)

2 answers

2

No, negative margin on CSS is not bad practice. Negative margin is a great way to deny paddings in an element, when some internal element should be positioned in such a way.

Also, I think the only 100% reliable way, supported by all browsers, to center an element vertically and horizontally in relation to a parent element, is by using negative margin, as follows the example:

.classe_css{
  left:50%;
  top:50%;
  position: relative;
  margin-left:-40px; /* -1/2 width */
  margin-top:-40px; /* -1/2 height */
}

  • I liked in parts of your answer... It was not clear this example, could explain better?

  • Of course, I had used this code as an example to answer this question. Using negative margin is the best, maybe only solution compatible with all browsers in this case, and if you want to take a look , in that fiddle a functional example.

  • Got it... I think it’s important you update the answer stating that it applies to this scenario. VLW

  • In fact, there is another form that I think is even better because it can apply even if you don’t know the sizes of the Divs. I hate negative margins (own opinion). Replace negative margins with this line: transform: translate(-50%, -50%);

0

Margin negative is not necessarily a bad practice, for example you can use the technique of faux-Columns imageless.

Negative values for margin properties are allowed, but there may be implementation-specific Limits.

- W3C, on margin properties

This excerpt was taken from an iMasters discussion on the same subject.

Give this one a read article here, it explains ways to use negative margins, showing common forms and errors as well.

  • I agree it’s not a bad practice. I just wouldn’t put such old references when it comes to CSS.

  • 1

    yes yes it’s just as example there are many very good articles to reference i updated the links and put a newer one

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.