Trying to understand negative margins

HTML-CSS
1

Before posting this, I reviewed the following discussions/websites on this topic:

https://forum.freecodecamp.org/search?q=negative%20margin


http://css-101.org/negative-margin/03.php

But I still do not get how negative margins work. Or rather, they are not working the way I think they should based on my understanding.

Specifically, I am using negative margins to ensure that each section does not get covered by fixed navbar when I scroll to that section via links in navbar.

[CodePen here: https://codepen.io/sabahatiqbal/pen/EpPvZb]

I understand setting the height of span = height of navbar so that the next element (i.e. the section I am trying to show) is not hidden by navbar. But then I dont get why the margin-top has to be set to negative 92.

Won’t that push my hidden up by 92 points…which will negate the fact the height code…?

Thank you.

2

Basically if you have an item that is supposed to be located in a certain spot. If you set its margin-top to a positive number that means the item shifts down from where it would be when margin is 0. Therefore, if you set negative margin, then it shifts upwards.

3

sorry I think i missed the point when I responded.

The margin-top is actually not responsible for your internal links working better. That, as you said, is related to the height of the span (eg. google being set to 92px).

But, the margin-top is responsible for making the span ‘disappear’

When you take that line of code out, you will notice that with 92px the span looks like a big empty area.
Give it a try…

1 Like
4

But that’s exactly my problem. When I remove the negative margin, it works perfectly fine. I made the change and saved it here: https://codepen.io/sabahatiqbal/pen/EpPvZb

Also, in another project, the code does not work regardless of whether I put in the negative margin or not, Which leaves me even more confused. See here: https://codepen.io/sabahatiqbal/pen/XBpvaG

5

When you put negative margins, the element who has them will overlap next element. Example: margin-top: -10px; means that element will overlap element who’s above it. PS: Overlapping will occur if element with negative margin has higher z-index. If it have lower, it will go underneath.

6

Please reread my comment…

7

Hi, @sabbyiqbal

It is because you have to link your anchor tag to the <span></span> element, but you have linked it to the <section>

This is your code,

<a href ="#projects">Projects</a>
and

<span class = "other-span"></span>
<section id = "projects">

You have made <span class = "other-span"></span> and called it as #other-span in your CSS

You have to change <span class="other-span"> to <span id="other-span"> and change the anchor link to <a href ="#other-span">Projects</a>

Now apply the style to ,

#other-span {
  height: 90px;
  margin-top: -90px;
  display: block;
  visibility: hidden;
}

Likewise do these to other anchor elements and span elements.

1 Like
8

Thank you @Sujith3021, @hbar1st and @codename11 for all help !