CODEWITHSUNDEEP
csscss-positionmargin
caramel1995
caramel1995

Reputation: 3055

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?

Upvotes: 3

Views: 5536

Answers (4)

Kenneth Nnabuife
Kenneth Nnabuife

Reputation: 1

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

Upvotes: 0

yanchamlak tadege
yanchamlak tadege

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

Upvotes: -1

yanchamlak tadege
yanchamlak tadege

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

Upvotes: -1

Mr. Alien
Mr. Alien

Reputation: 157324

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

Upvotes: 8

Related Questions