Is it just me, or do margin-left; and position: relative; and left; do the same things?

HTML-CSS
1

I am learning about position: relative; left: 30px; and ```margin-left: 30px;``

Is it my imagination or do these two methods do the exact same thing. The code:

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

and the other way:

<html>
<head>
<style>
div.relative {
  margin-left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

They seem to be the same. When would it be prudent to use one over the other?

2

Not quite the same thing. Pay special attention to the right border of the div. Also, do you see anything that probably shouldn’t be there at the bottom of the browser window when using relative positioning?

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.