为什么右上边距不起作用,而左上边距,上边距和下边距为什么不起作用?

Max*_*Max 4 css margin

当我设置margin-right时:50px; 我没有看到任何效果,但是当我替换margin-right时:50px; 左边距为:50px; 或margin-top:50px; 我确实看到了效果。这是边距为右的代码...

<!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>
Run Code Online (Sandbox Code Playgroud)

Ric*_*pek 5

默认情况下,Html元素总是在其父元素的左上角进行标记

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

如果您在远离此角落的地方添加一个  margin-top 或  margin-left 您的.me“推动”本身(这就是为什么它会移动的原因)。

如果 在右侧/下方添加  margin-right或  margin-bottom其他元素,则会“推”出该元素。

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

试试看!