Difference Between "Margin-Left", and "Left" (Or "Margin-Right", and "Right")

Difference between margin-left, and left (or margin-right, and right)

When you move something with position:relative you're not actually moving the space it takes up on the page, just where it is displayed.

An easy way to test this is to use a simple structure like this:

<div id = "testbox">
  <img src = "http://www.dummyimage.com/300x200" id = "first">
  <img src = "http://www.dummyimage.com/300x200" id = "second">
</div>

with the following CSS:

img{ display:block; }
#first{ margin-top:50px; }

versus this CSS:

img{display:block;}
#first{position:relative; top:50px;}

You'll see that the first moves everything down 50px while the second only moves the first image down (which means it will overlap the second image).

Edit: you can check it out in action here: http://www.jsfiddle.net/PKqMT/5/

Comment out the position:relative; and top:100px; lines and uncomment the margin-top line and you'll see the difference.

How is margin start different from margin left and similarly margin end different from margin right in Android xml

for different layout direction that is from API 17+:

left to right flow, start=left, end=right.

right to left flow, start=right, end=left.

Difference between margin-left and left when the position set absolute

There is a subtle difference.

Consider the following example:

<div class="wrap">
    <div class="ex1">Ex 1</div>
    <div class="ex2">Ex 2</div>
    <div class="ex3">Ex 3</div>
</div>

body {
    margin: 0;
}
.wrap {
    margin: 0 50px;
    background-color: lightgray;
    height: 200px;
    width: 400px;
}
.ex1 {
    position: absolute;
    background-color: beige;
    margin-left: 50px;
}
.ex2 {
    position: absolute;
    left: 50px;
    background-color: beige;
    margin-left: 0px;
}
.ex3 {
    position: absolute;
    top: 50px; /* so you can see what is happening */
    left: 0px;
    background-color: beige;
    margin-left: 50px;
}

And see the results at: http://jsfiddle.net/audetwebdesign/WQA6B/

In Example 1 (.ex1), the margin is 50px from the left edge of the parent container (.wrap).

In Example 2 (.ex2) the element is 50px from the left edge of the view port.

To get .ex2 to behave similarly to .ex1, you would need to set position: relative
to .wrap so both div's are positioned with respect to the same context.

There is yet another factor. In Example 1, I did not specify any offsets, so the element remains in the position if would have been if you had used position: static, which is why the margin is computed with respect to the left edge of the wrapper.

If I had set left: 0 (see Example 3) you would have gotten a result similar to Example 2.

Is there any difference between 'margin-top, -left, -bottom, -right' and 'top, left, bottom, right' properties when element is positioned absolutely?

Yes there is a difference related to the static position. Here is a simple example to illustrate:

.box {
  position: relative;
  border: 2px solid green;
  width: 200px;
  position: relative;
  display: inline-block;
}

.box>div {
  height: 50px;
  width: 50px;
  background: red;
}

<div class="box">
  <h1>I am static</h1>
  <div></div>
</div>

<div class="box">
  <h1>I am static</h1>
  <div style="position:absolute;margin-top:20px;"></div>
</div>

<div class="box">
  <h1>I am static</h1>
  <div style="position:absolute;top:20px;"></div>
</div>

What does auto do in margin: 0 auto?

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Which would give:

margin-left: 25;
margin-right: 25;

Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.

Div Module Left and Right Margin Not Working in Responsive Design

You just need to remove the width:100% on you module CSS because width should change as the screen get lesser.

And remove also the line

/*top: auto;
 left: auto; It will just initialize your absolute position*/ 

.module {
    display: block;
    position: absolute;
    /*width: 100%;*/
    height: 100px;
    max-width: 768px;
    background-color: yellow;
    z-index: 100;
    right: 0;
    left: 0;
    margin: auto;
}

.overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background-color: Gray;
}

@media screen and (max-width: 768px) {
  .module {
  margin-left: 32px;
  margin-right: 32px;
  /*top: auto;
  left: auto; It will just recreate 
 }
}

<div class="content">
  <button>Open Module</button>
</div>

<div class="module"></div>

<div class="overlay"></div>

Why magin:auto is not enough to center position absolute or fixed?

You need to refer to the specification to understand this. If your element is not positionned using position:absolute then you need to consider this section where you can read:

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal. This horizontally centers the element with respect to the edges of the containing block.

For in-flow elements, only margin is needed in addition to the width.

---

When it comes to position:absolute elements we refer to this section

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0

It's clear that if you don't see any left, right or width, margin will get computed to 0 (no centring)

If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values

When you set left, right and width the margin will get equal values (that we can found with the formula) and you will have centring.

If you continue reading you can also see:

Otherwise, set 'auto' values for 'margin-left' and 'margin-right' to 0, and pick the one of the following six rules that applies.

So we only get a centring effect for margin if we set left, right and width. omiting one will not center the element.

Below an example to illustrate the 8 different cases like detailed in the specification.

.box {

  height:50px;

  border:1px solid;

  position:relative;

  margin:5px;

}

.box > div {

  position:absolute;

  left:0;

  right:0;

  margin:auto;

  width:200px;

  background:red;

  color:#fff;

}

<div class="box">

  <div>some text</div>

</div>

<div class="box">

  <div style="width:auto;">some text</div>

</div>

<div class="box">

  <div style="left:auto">some text</div>

</div>

<div class="box">

  <div style="left:auto;width:auto">some text</div>

</div>

<div class="box">

  <div style="right:auto">some text</div>

</div>

<div class="box">

  <div style="right:auto;width:auto;">some text</div>

</div>

<div class="box">

  <div style="right:auto;left:auto;">some text</div>

</div>

<div class="box">

  <div style="right:auto;left:auto;width:auto;">some text</div>

</div>

Top & Left vs margin-top & margin-left

Well, the main difference is that absolutely positioned elements are pulled out of the content flow.

But also with relatively positioned elements, the surrounding content may become obfuscated.

Margins on the other hand are added to the element's size while the surrounding content flows accordingly.

See this sample fiddle with some differences.

Surely there are situations where both deliver the same results, but under normal conditions, these two aproaches aren't simply exchangeable nor comparable.

---

Related Topics