3

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?

caramel1995
  • 2,968
  • 10
  • 44
  • 57

4 Answers4

8

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

Community
  • 1
  • 1
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • 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
0

Both CSS positioning and margin can be used to move an element on a web page. However, they work in different ways and are used for different purposes. CSS positioning is used to precisely place an element on a web page, whereas margin is used to define the space around an element.

In your example, using CSS positioning to move the second header above the first header is the more appropriate method. This is because CSS positioning is designed specifically for positioning elements, and allows for precise control over the placement of an element relative to its parent or to other elements on the page.

Margin, on the other hand, is more appropriate for defining the space between elements, rather than for positioning elements above another. While you can use negative margins to move an element, this is generally not considered best practice as it can lead to unpredictable results, especially when dealing with responsive web design.

In general, it's a good idea to use CSS positioning to precisely position elements on a web page, and to use margin to define the space between elements. However, the specific method you choose will depend on the particular requirements of your web page and the layout you are trying to achieve.

If you want to learn more about CSS positioning, I highly recommend this video: https://youtu.be/arODwDNUUh8

Kenneth Nnabuife
  • 1
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 28 '23 at 13:54
-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 .

yanchamlak tadege
  • 1
  • 1
-1

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.
TylerH
  • 20,799
  • 66
  • 75
  • 101
yanchamlak tadege
  • 1
  • 1