Difference between CSS Positioning and CSS Margin

Question

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?

score 8 · Accepted Answer · edited May 23 '17 at 10:27

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...

So how if i use position:absolute?It will has the same effect like margin did right? — caramel1995, Dec 21 '13 at 14:10
@caramel1995 no, `position: absolute;` has nothing to do with margins, read my other answer which I've linked to, read it nicely and am sure you will understand all the positions :) — Mr. Alien, Dec 21 '13 at 14:11

score -1 · Answer 2 · answered Dec 05 '15 at 17:54

in css margin is the space outside the border. it separates a block from other blokes. but a great difference with padding is that the the margin dose not include background .in other words difference between css positiong and css margin is,no they are not the same using postion ;relative ; keeps the element in the flow it just moves the element position but physically it reserves space in the flow .

score -1 · Answer 3 · edited May 02 '22 at 17:45

there are four types of CSS positioning

static: this is the default for every single page element. different element do not have different result for positioning .
relative: this type of positing is probably the most confusing and misused.
absolute: this is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.
fixed: this is types of positioning is fairly rare but certainly has use.

Difference between CSS Positioning and CSS Margin

The Code(CSS Positioning):

The Code(CSS Margin):

The Question:

3 Answers3

Related