Чому цей стиль CSS margin-top не працює?

Я намагаюся додати значення маржі в div всередині іншого div. Все працює добре, окрім найвищого значення, воно, здається, ігнорується. Але чому?

Що я очікував:

Що я отримую:

Код:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools не мають пояснення, чому маржа поводиться таким чином.

Ви насправді бачите, як верхній край #innerелемента згортається у верхній край #outerелемента, залишаючи #outerнедоторканим лише поле (хоч і не показане на ваших зображеннях). Верхні краї обох ящиків прилягають одна до одної, оскільки їхні поля рівні.

Ось відповідні моменти зі специфікації W3C:

8.3.1 Маржини згортання

У CSS прилеглі поля двох або більше полів (які можуть бути, а може і не бути побратимами) можуть поєднуватися, щоб утворювати єдиний запас. Маржини, що поєднуються таким чином, кажуть, що вони руйнуються , а отримана комбінована маржа називається краєм, що згорнувся .

Суміжний вертикальний край руйнується [...]

Два поля примикають, якщо і тільки якщо:

• обидва належать до полів рівня блоку в потоці, які беруть участь у одному контексті форматування блоку
• жодні лінійні ящики, жоден зазор, ніякі прокладки та межі не розділяють їх
• обидва належать до вертикально сусідніх країв коробки, тобто утворюють одну з наступних пар:
  • верхнє поле коробки та верхнє поле його першого вхідного пристрою

Ви можете виконати будь-що з наступного, щоб запобігти руйнуванню поля:

• Плавайте будь-яким із своїх divелементів
• Зробіть будь-який із divелементів вбудованих блоків
• Набір overflowз #outerдоauto (або будь-яке значення , відмінне visible)

Причина, що описані вище варіанти запобігає руйнуванню поля, полягає в тому, що:

• Поля між плаваючою коробкою та будь-яким іншим ящиком не руйнується (навіть між поплавком та його дітьми, що надходять у рух).
• Межі елементів, які встановлюють нові контекстні формати блоку (наприклад, поплавці та елементи із 'переповненням', відмінним від 'видимого'), не руйнуються зі своїми дітьми в потоці.
• Поля коробки вбудованого блоку не руйнуються (навіть не з дітьми, що надходять у рух).

Лівий і правий поля поводяться так, як ви очікували, оскільки:

Горизонтальні поля ніколи не руйнуються.

Спробуйте скористатися display: inline-block;внутрішнім ділом.

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

Те, що згадував @BoltClock, досить солідне. І тут я просто хочу додати ще кілька рішень для цієї проблеми. перевірити цей запас w3c_collapsing . Зелені частини - це потенційна думка, як можна вирішити цю проблему.

Рішення 1

Поля між плаваючою коробкою та будь-яким іншим ящиком не руйнується (навіть між поплавком та його дітьми, що надходять у рух).

це означає, що я можу додати float:leftдо #outerабо #inner demo1 .

також зауважте, що floatможе визнати недійсним autoмаржу.

Рішення 2

Межі елементів, які встановлюють нові контекстні формати блоку (наприклад, поплавці та елементи із 'переповненням', відмінним від 'видимого'), не руйнуються зі своїми дітьми в потоці.

крім visible, давайте введемо overflow: hiddenв #outer. І цей спосіб видається досить простим і гідним. Мені це подобається.

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    overflow: hidden;
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

Рішення 3

Поля абсолютно розміщених ящиків не руйнується (навіть із дітьми, що надходять у потік).

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: absolute; 
}
#inner{
    background: #FFCC33;
    height: 50px;
    margin: 50px;
}

або

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    position: relative; 
}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;
    position: absolute;
}

ці два методи порушать нормальний потік div

Рішення 4

Поля коробки вбудованого блоку не руйнуються (навіть не з дітьми, що надходять у рух).

те саме, що і @enderskill

Рішення 5

Нижнє поле елемента на рівні блоку потоку завжди руйнується з верхньою межею його наступного блоку на рівні блоку в потоці, за винятком випадків, коли цей брат має просвіт.

Це не має великого стосунку до питання, оскільки це руйнування між братами і сестрами. це, як правило, означає, якщо у верхній коробці є, margin-bottom: 30pxа в коробці рідних братів margin-top: 10px. Загальна маржа між ними 30pxзамість 40px.

Рішення 6

Верхнє поле елемента блоку в потоці згортається з його першим верхнім полем на рівні блоку потоку, якщо елемент не має верхньої межі, немає верхньої прокладки, і дитина не має зазору.

Це дуже цікаво, і я можу просто додати одну верхню межу

#outer{
    width: 500px;
    height: 200px;
    background: #FFCCCC;
    margin: 50px auto;
    border-top: 1px solid red;

}
#inner {
    background: #FFCC33;
    height: 50px;
    margin: 50px;

}

А також <div>є рівнем блоку за замовчуванням, тому вам не доведеться оголошувати це спеціально. Вибачте за те, що не міг опублікувати більше 2 посилань та зображень через мою репутацію початківця. Принаймні ви знаєте, звідки виникає проблема наступного разу, коли ви бачите щось подібне.

Не знаєте, чому те, що у вас не працює, але ви можете додати

overflow: auto;

до зовнішньої діви.

Якщо додати будь-які набивки #outer, це працює.

Демо

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

Не точно впевнений чому, але змінивши внутрішній CSS на

display:inline-block;

здається, працює;

Не відповідає на "чому" (має бути чимось з / краєм), але здається, що найпростішим / найбільш логічним способом зробити те, що ви намагаєтесь, було б просто додати padding-topдо зовнішнього діла :

http://jsfiddle.net/hpU5d/1/

Незначна примітка - не слід встановлювати діви, display:block;якщо у вашому коді є щось інше, що скаже, що воно не блокується.

спробуйте це:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

Удачі

Я думаю , настройка положення властивість #inner справ до відносно може також допомогти досягти ефекту. Але все одно я спробував оригінальний код, вставлений у Питання про IE9 та останню версію Google Chrome, і вони вже дають бажаний ефект без будь-яких модифікацій.

Використовувати padding-top:50pxдля зовнішньої діви. Щось на зразок цього:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Примітка: підкладка збільшить розмір вашої діви. У цьому випадку, якщо важливий розмір вашого діва, я маю на увазі, якщо він повинен мати конкретну висоту. зменшити висоту на 50 пікс .:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Ви пробували! Важливо, перш за все, це змусить усе:

margin:50px 50px 50px 50px !important;

Просто для швидкого виправлення спробуйте вплести дочірні елементи в такий divелемент -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

Межа innerдіва не згортається через прокладку 1pxміж проміжками outerта innerдівом. Тож логічно ви матимете 1pxдодатковий простір разом із існуючим запасом innerdiv.