2015-09-16 8 views
1

Когда я устанавливаю margin-right: 50px; Я не вижу никакого эффекта, но когда я заменю margin-right: 50px; с margin-left: 50px; или margin-top: 50px; Я вижу эффект. Вот код с маржинальной правом ...Почему margin-right не работает, но margin-left, margin-top и margin-bottom делают?

<!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> 

+4

Это не код с правом margin-right. – BoltClock

+0

Что вы ожидаете от маржи - право делать? –

+0

Невозможно увидеть «margin-right» – kdlcruz

ответ

3

Html элементы по умолчанию всегда выровненным в верхнем левом углу своего родительского элемента.

Таким образом, ваш .me расположен в верхнем левом углу элемента body.

Если вы добавили margin-top или margin-left, ваш .me «отталкивает» себя от этого угла (вот почему вы его видите).

Если вы добавите margin-right или margin-bottom, то другие элементы справа/ниже вашего элемента будут «оттолкнуты».

В качестве у вас нет элементов справа/ниже вашего элемента вы не можете видеть этот эффект.

Попробуйте!

+0

Это имеет смысл. Спасибо. – Max

Смежные вопросы