When I try to shift the image upwards using negative margin the whole container is moved upwards

by

It is due to the margin-collapsing rule. To fix it, you can simply use a transparent border on the element:

.logo img {
   border: 1px solid transparent;
   margin-top: -10px;
   display: block;
}

What is margin collapsing?

I already linked to the documentation page of MDN for what margin collapsing is. Here’s the quick look:

enter image description here

enter image description here

Now, why adding border aborts the margin-collapsing rule?

This is not the only way prevent margin-collapsing; there are other ways too such as adding padding to the element.

Why does this prevent collapsing of margin? Because it (the element) is separated from the box layout. I mean to say that the padding or border doesn’t separate the element physically from one another, but margin separates each physically.

Okay, lets discuss how border, padding, or overflow techniques prevent a collapsing margin. To clear up things to you, I have made this picture of magnets. You may know the rule of opposite pole magnets if one is shifted the other would also shift instead of stitching with one-another.

Look at the pictures to know how margin collapse is prevented:

enter image description here

enter image description here

The rule of margin collapsing may not be exactly as the opposite pole of magnet rules. But to clear things up this is just enough I hope.

More Related Contents:

  1. Can't get footer image to display in IE8?
  2. How to collect and manipulate data in HTML using
  3. How to force child div to be 100% of parent div’s height without specifying parent’s height?
  4. SVG drop shadow using css3
  5. Switching the order of block elements with CSS [duplicate]
  6. Imitating a blink tag with CSS3 animations
  7. How can I force a long string without any blank to be wrapped?
  8. 100% Min Height CSS layout
  9. Equal space between flex items
  10. How to get a child element to show behind (lower z-index) than its parent?
  11. Background image not showing in Safari
  12. How to vertically align into the center of the content of a div with defined width/height?
  13. What is the performance impact of the universal selector?
  14. Allow specific tag to override overflow:hidden
  15. Place boxes inside ul in center, but align them left
  16. Aligning decimal points in HTML
  17. Why is nth-child selector not working?
  18. Can I nest button inside another button?
  19. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  20. How to center multiple divs inside a container in CSS
  21. How can I create a wavy shape CSS?
  22. Auto height on parent container with Absolute/Fixed Children
  23. Display text, a dotted line then more text spanning the width of the page
  24. CSS Zigzag Border with a Textured Background
  25. How can I control the width of a label tag?
  26. How to create a multi-column list?
  27. “break-inside: avoid-column” doesn’t work in Firefox
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment