Форум

antserg · #1 (**permalink**) 02.09.2012, 08:53

Здравствуйте. Допустим есть два блока (один блок находится внутри другого), мне нужно внутреннему блоку придать верхнему марджину отступ 20px, а левому марджину в 10px. Прописываю внутреннему блоку:
margin: 20px 0 0 10px;
В результате влево есть отступ 10px, все правильно, а вот сверху тоже есть отступ, но не внутреннего блока, а ОБОИХ блоков на эти 20px. Подскажите пожалуйста почему так.

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="b-1">
    <div id="b-2"></div>
  </div>
</body>
</html>

Код:

#b-1{
  background: #00f;
  width: 200px;
  height: 200px;
}
#b-2{
  background: #f00;
  width: 100px;
  height: 100px;
  margin: 20px 0 0 10px;
}

bot87 · #2 (**permalink**) 02.09.2012, 09:26

Это называется слияние margin.
http://htmlbook.ru/samlayout/blochna...hiesya-otstupy.
Почитай ,там есть варианты ,которые помогут тебе.

может тебя устроит вариант присвоить родителю display:inline-block

Deff · #3 (**permalink**) 02.09.2012, 09:33

Просто нун начальное обнуления
margin:0;
padding:0;
делать и бордеры прописать (у браузеров дефолтные отступы

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
  margin:0;
  padding:0;
}
#b-1{
  border:1px solid transparent;
  background-clip:border-box;
  background: #00f;
  width: 200px;
  height: 200px;
}
#b-2{
  border:1px solid transparent;
  background-clip:border-box;
  background: #f00;
  width: 100px;
  height: 100px;
  margin: 20px 0 0 10px;
}

</style>

</head>
<body   style="background: #74CB74;">
  <div id="b-1">
    <div id="b-2"></div>
  </div>
</body>
</html>

bot87 · #4 (**permalink**) 02.09.2012, 09:46

Deff интересный способ.

antserg · #5 (**permalink**) 02.09.2012, 09:54

Deff,
Ну margin и padding в ноль, это понятно. А вот при чем здесь бордеры - не понятно. Ведь без них не получится. Или здесь не нужно понимать, нужно просто запомнить, так как это какой-нибудь хак?
bot87,
Спасибо за ссылку, буду изучать