Search code examples
csscss-positionmargin

Difference between CSS Positioning and CSS Margin

Today I was learning 2 concepts in CSS, one is CSS positioning (static, relative, absolute, fixed) and the other is CSS Margin, which define the space between element.

Let's say I wanted to move an element, which is the best way of doing it?Since both concept seems to be able to do the same thing. An example might be as follow:

The Code(CSS Positioning):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS positioning
            h2{position:relative;top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

The Code(CSS Margin):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Haha</title>

        <style type="text/css">
            //Using CSS Margin
            h2{margin-top:-80px}
        </style>
    </head>

    <body>
        <h1>hahahaha</h1>
        <h2>hehehehe</h2>
    </body>
</html>

The Question:

1.)As you can see the 2 codes above did the same thing by moving the second header to the top of the first header. So I just wonder which method is actually the correct way in arranging element?

Solution

  • No, they are not the same, using position: relative; keeps the element in the flow, it just moves the element position but physically it reserves space in the flow whereas using margin it moves entire element which affects elements around the one which is moved using margin, which also leads to collapsing margins in some cases...

    Demo (position: relative;)

    Demo (with margin)

    How CSS Positioning works? I just explained here few minutes back

    Also, margin and positioning are completely two different things, positioning is a huge concept, where as margin is completely different, positioning doesn't affect your box model, where as margin does, margins are used to space up the elements, say inline-block elements, or say you need some space above and below paragraphs, they are not meant to position elements etc...

    If you see this

    enter image description here

    Margin takes area around the element, i.e if an element is 50px in width and you use margin of 10px, it takes 10px on all sides, so it will actually make your element take up 70px in total, 50px => width + 10px => left margin + 10px => right margin, where as using position, it doesn't expand or decrease the area around the element, it just changes the position of the element which may or may not affect other elements on the page depending upon the position whereas margin changes the box model, and thus, it also affects the position of other elements such as static and relative.

    Also, margin is not applied vertically to inline element, so that if you apply margin to span or any other inline element say a, margin will be taken only horizontally and not vertically, for that, you will have to make them either inline-block or block level element.

    For more information, you can read my answer on another question. Whereas you can apply position: relative; to any element, regardless of block, inline or inline-block it will position the element the way you want to...