当我设置margin-right: 50px;我没有看到任何效果，但是当我替换margin-right: 50px;margin-left: 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>
Html元素默认总是对齐在父元素的左上角。
您的.me因此被放置在body元素的左上角。
如果你添加一个margin-top或margin-left，你的.me"推动"自己远离这个角落(这就是为什么你看到它移动)。
如果你添加了margin-right或margin-bottom，元素的右边或下面的其他元素将被"推"开。
由于没有任何元素在元素的右边或下面，所以看不到这个效果。
试试吧!