Menu
When I set margin-right: 50px; I do not see any effect, yet when I replace the margin-right: 50px; with margin-left: 50px; or margin-top: 50px; I do see an effect. Here is the code with 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>
642
Html elements are per default always alligned at the top left corner of their parent element.
Your .me is thus placed in the top left corner of the body element.
If you add a margin-top or margin-left your .me "pushes" itself away from this corner (this is why you see it moving) .
If you add a margin-right or margin-bottom other elements on the right/below your element would be "pushed" away.
As you don't have any elements on the right/below your element you can't see this effect.
Try it out!
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
