为什么margin-right 不起作用，而margin-left、margin-top 和margin-bottom 可以？答案

【问题标题】：Why does margin-right not work, but margin-left, margin-top and margin-bottom do?为什么margin-right 不起作用，而margin-left、margin-top 和margin-bottom 可以？
【发布时间】：2015-09-16 20:33:40
【问题描述】：

当我设置 margin-right: 50px;我没有看到任何效果，但是当我替换 margin-right: 50px;左边距：50px；或边距顶部：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>

【问题讨论】：

那是...不是margin-right的代码。
你希望margin-right做什么？
看不到margin-right
假设您打算在上面的 sn-p 中放置 margin-right 而不是 top，它确实有效，但 .me 是一个块元素，因此占用了整行。您可以看到它在this example by adding background colours 中有效。注意删除 div 右边距时会发生什么。
尝试填充一些内容（长文本），它会工作

标签： css margin

【解决方案1】：

Html 元素默认总是对齐在其父元素的左上角。

因此，您的.me 被放置在body 元素的左上角。

如果您添加margin-top 或margin-left，您的.me 会将自己“推”离这个角落（这就是您看到它移动的原因）。

如果您在右侧/下方添加 margin-right 或 margin-bottom 其他元素，您的元素将被“推”开。

由于您的元素右侧/下方没有任何元素，因此您看不到这种效果。

试试看！

【讨论】：

这很有意义。谢谢。