How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

by

Negative margins are valid in css and understanding their (compliant) behaviour is mainly based on the box model and margin collapsing. While certain scenarios are more complex, a lot of common mistakes can be avoided after studying the spec.

For instance, rendering of your sample code is guided by the css spec as described in calculating heights and margins for absolutely positioned non-replaced elements.

If I were to make a graphical representation, I’d probably go with something like this (not to scale):

negative top margin

The margin box lost 8px on the top, however this does not affect the content & padding boxes. Because your element is absolutely positioned, moving the element 8px up does not cause any further disturbance to the layout; with static in-flow content that’s not always the case.

Bonus:

Still need convincing that reading specs is the way to go (as opposed to articles like this)? I see you’re trying to vertically center the element, so why do you have to set margin-top:-8px; and not margin-top:-50%;?

Well, vertical centering in CSS is harder than it should be. When setting even top or bottom margins in %, the value is calculated as a percentage always relative to the width of the containing block. This is rather a common pitfall and the quirk is rarely described outside of w3 docos

More Related Contents:

  1. When to use margin vs padding in CSS [closed]
  2. How to disable margin-collapsing?
  3. Margin on child element moves parent element
  4. CSS Margin Collapsing
  5. Margin-Top not working for span element?
  6. How do I uncollapse a margin? [duplicate]
  7. What does auto do in margin: 0 auto?
  8. CSS: Margin-top when parent’s got no border
  9. How can I remove space (margin) above HTML header?
  10. How do I center an SVG in a div?
  11. html, css – weird invisible margin below pictures
  12. CSS margin-top of affects parent’s margin
  13. Set position absolute and margin
  14. Remove “whitespace” between div element
  15. Remove all padding and margin table HTML and CSS
  16. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  17. What is the difference between `margin` and `padding` in CSS?
  18. Why were margin collapse rules introduced in CSS?
  19. CSS: clean solution to the margin collapse issue when floating an element
  20. How do I hide an element when printing a web page?
  21. ::slotted CSS selector for nested children in shadowDOM slot
  22. Aligning grid items across the entire row/column (like flex items can)
  23. Is embedding background image data into CSS as Base64 good or bad practice?
  24. Specify an SVG as a background image and ALSO style the SVG in CSS?
  25. Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell
  26. Make children divs the height of tallest child
  27. Fill only Half a star with SVG
  28. Is vertical text-overflow possible with css3?
  29. Why shouldn’t I use position:absolute for positioning everything?
  30. Bootstrap Grid System new line does not look nice

Leave a Comment