'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?

csscss-positionmargin


Solution 1:[1]

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 .

Solution 2:[2]

there are four types of CSS positioning

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 yanchamlak tadege
Solution 2 TylerH

Related Questions