当我设置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)
默认情况下,Html元素总是在其父元素的左上角进行标记。
.me 因此,您 位于body元素的左上角 。
如果您在远离此角落的地方添加一个 margin-top 或 margin-left 您的.me“推动”本身(这就是为什么它会移动的原因)。
如果 在右侧/下方添加 margin-right或 margin-bottom其他元素,则会“推”出该元素。
由于您的元素右侧/下方没有任何元素,因此看不到这种效果。
试试看!