What is the difference urgently please? Margin & Position"

In Let’s Test Your Memory! project

Why using position and top instead of just one line of code margin-top ?? is there any preference ?

<div id="gameboard">
    <div class="card">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_star.png">
    </div>
</div>

#gameboard {
text-align: center;
/* position: relative; /
/
top: 30px; */
margin-top: 35px;
}

margin is part of the box model, position and top are not. margin-top will affect the height of the box, where top is an offset that does not change the height of the box.

Note that both can be used in combination. An element can have both an offset and a margin, as long as we know what the margin applies to.

2 Likes

That was useful. Thanks.

2 Likes

Just a little confirmation … So it is preferred to use for such example and in general relative position and margin when i want to have spaces between boxes for example??

It is not about preference, only what makes sense in our layout. Web development is objective, not subjective. Creativity is subjective, but that relates to content, not structure.

Addendum

Say we have a banner of some height that is fixed. It makes sense to offset the normal flow content by that same amount. This way we don’t have to fudge with the margin. We could set the margin to what minor amount we want below the header, say 10 to 20 pixels. If we decide to hide the banner, we don’t have to fiddle with the margin, just toggle the top property.

For example,

#banner {
    display: block;
    position: fixed;
    height: 100px;
    background: url(banner.png);
}
#wrapper {
    position: relative;
    top: 100px;
}
header, footer {
    margin: 10px auto;
}
main {
    margin: 0 auto;
}

<body>
<div id="banner"></banner>
<div id="wrapper">
  <header></header>
  <main></main>
  <footer></footer>
</div>
</body>

banner.onclick = toggle

The last one can be explored when you get to the scripting part of the course. Study the structure and the selectors and conceptualize.

1 Like

Thanks a million for such explanation :slight_smile:

1 Like