CODEWITHSUNDEEP
cssmargin
Max
Max

Reputation: 2136

Why does margin-right not work, but margin-left, margin-top and margin-bottom do?

When I set margin-right: 50px; I do not see any effect, yet when I replace the margin-right: 50px; with margin-left: 50px; or margin-top: 50px; I do see an effect. Here is the code with margin-right...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Max Pietsch homepage</title>
        <style type="text/css">
        .me {
            margin-right: 20px;
        }
        #pic_of_me {
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="me">
        <img id="pic_of_me" src="me.jpg" alt="A picture of me">
    </div>
</body>

Upvotes: 7

Views: 4595

Answers (1)

Rico Ocepek
Rico Ocepek

Reputation: 803

Html elements are per default always alligned at the top left corner of their parent element.

Your .me is thus placed in the top left corner of the body element.

If you add a margin-top or margin-left your .me "pushes" itself away from this corner (this is why you see it moving) .

If you add a margin-right or margin-bottom other elements on the right/below your element would be "pushed" away.

As you don't have any elements on the right/below your element you can't see this effect.

Try it out!

Upvotes: 8

Related Questions