Проблемы с margin

SnowWind · January 10, 2013

Всем привет

Ребята объясните пожалуйста принцип работы margin-top от чего он отталкивается?

вот код


<html>
<head>
<link href='css.css' rel='stylesheet' type='text/css' />
</head>
<body>   
<div class="container">
<div class="margin">
</div>
</div> 
</body>
</html>


body {
margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
background-color: #838485;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  width: 500px;
  height: 200px;
  background-color: blue;
}

.margin {
  margin-top: 100px;
  height: 50px;
  width: 200px;
  background-color: red;  
}

и вот результат работы

Почему он отталкивается не от container а видимо от body ???

wwt · January 10, 2013

Примечание
У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:
для элементов, у которых на стороне схлопывания задано свойство padding.
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute;
на плавающих элементах (для них свойство float задано как left или right);
для строчных элементов;
для <html>.

кстати сказать еще контейнеру можно добавить overflow:hidden; тогда схлопывания так же не будет.

Edited January 10, 2013 by wwt

SnowWind · January 10, 2013

вот уж печалька, а вот я убираю margin-top: 100px; у div.margin помещаю внутрь него тег <p> и ему задаю ему margin-top: 100px; и опять ерунда это то же схлопывание?

klierik · January 10, 2013

повесь на div стиль:

padding-top: 1px;

wwt · January 11, 2013

вот уж печалька, а вот я убираю margin-top: 100px; у div.margin помещаю внутрь него тег <p> и ему задаю ему margin-top: 100px; и опять ерунда это то же схлопывание?

<p> блочный элемент так почему нет )

Sign In

Проблемы с margin

Question

SnowWind

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

SnowWind

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information