为什么 margin-right 不起作用，而 margin-left、margin-top 和 margin-bottom 却起作用？

Question

当我设置margin-right: 50px;我没有看到任何效果，但是当我替换 margin-right: 50px; 时左边距：50px；或 margin-top: 50px;我确实看到了效果。这是带有 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>

Answer 1

Html 元素 默认情况下始终 对齐在其父 元素的左上角。

因此，您的 .me 位于 body 元素的左上角。

如果你添加一个 margin-top 或 margin-left 你的 .me "pushes" 本身远离这个角落（这就是你看到它移动的原因）。

如果您在 right/below 上添加 margin-right 或 margin-bottom 其他元素，您的元素将 "pushed" 消失。

因为你的right/below你的元素上没有任何元素你看不到这个效果。

试试吧！

为什么 margin-right 不起作用，而 margin-left、margin-top 和 margin-bottom 却起作用？

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

css

margin