Вопросы Теги

CSS margin-top разрушенное расположение [дубликат]

Вот некоторые подходы к работе с асинхронными запросами:
  1. Объект обезьяны браузера
  2. Q - A
  4. A + Promises.js
  5. jQuery отложен
  6. API XMLHttpRequest
  7. Использование концепции обратного вызова - как реализация в первом ответе

Пример: jQuery отложенная реализация для работы с несколькими запросами 

var App = App || {};

App = {
    getDataFromServer: function(){

      var self = this,
                 deferred = $.Deferred(),
                 requests = [];

      requests.push($.getJSON('request/ajax/url/1'));
      requests.push($.getJSON('request/ajax/url/2'));

      $.when.apply(jQuery, requests).done(function(xhrResponse) {
        return deferred.resolve(xhrResponse.result);
      });
      return deferred;
    },

    init: function(){

        this.getDataFromServer().done(_.bind(function(resp1, resp2) {

           // Do the operations which you wanted to do when you
           // get a response from Ajax, for example, log response.
        }, this));
    }
};
App.init();
264
задан Dan Dascalescu 6 April 2015 в 10:17
поделиться

7 ответов

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

Вот соответствующие точки из спецификации W3C:

8.3.1 Коллапсирующие поля

В CSS смежные поля двух или более полей (которые могут или не могут быть братьями и сестрами) могут объединяться, чтобы сформировать единый запас. Поля, которые объединяются таким образом, называются collapse , а полученный комбинированный запас называется скомпенсированным пределом .

Приближение вертикальных полей сворачивается [ ...]

Два поля , примыкающие к , тогда и только тогда, когда:

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

. Причина, по которой выполнение любого из следующих действий предотвращает margin of collapsing:

Это происходит потому, что:

  • Поля между полем с плавающей точкой и любым другим полем не сворачиваются (даже между поплавком и его дочерними потоками).
  • Поля элементов, которые устанавливают контексты форматирования нового блока (такие как поплавки и элементы с «переполнением», отличные от «видимых»), не сворачиваются с их дочерьми в потоке.
  • Поля коробок inline-block не сворачиваются (даже с их дочерьми в потоке).

Левое и правое поля ведут себя так, как вы ожидаете, потому что:

Горизонтальные поля никогда не разрушаются.

385
ответ дан Community 25 August 2018 в 09:41
поделиться

Вы пробовали! важно прежде всего, это заставит все: 

margin:50px 50px 50px 50px !important;
76
ответ дан BoltClock 25 August 2018 в 09:41
поделиться

Не знаете, почему у вас нет работы, но вы можете добавить

overflow: auto;

к внешнему div.

12
ответ дан Brandon 25 August 2018 в 09:41
поделиться

Не отвечает «почему» (должно быть что-то с разваливающимся краем), но кажется, что самый простой / самый логичный способ сделать то, что вы пытаетесь сделать, - просто добавить padding-top к external div:

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

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

2
ответ дан Dave 25 August 2018 в 09:41
поделиться

Не совсем понятно, почему, но смена внутреннего CSS на 

display:inline-block;

, похоже, работает,

9
ответ дан harriyott 25 August 2018 в 09:41
поделиться

То, что упоминалось в @BoltClock, довольно солидно. И здесь я просто хочу добавить еще несколько решений для этой проблемы. проверьте это w3c_collapsing margin . Зеленые части - это потенциальная мысль о том, как эта проблема может быть решена.

Решение 1

Поля между плавающим полем и любым другим полем не сворачиваются (даже между float и его дочерние потоки).

, что означает, что я могу добавить float:left к #outer или #inner demo1 .

также отмечают, что float приведет к недействительности auto в поле.

Решение 2

Поля элементов, которые устанавливают контексты форматирования нового блока (например, float и элементы с «переполнением», кроме «видимых»), не сжимаются с их дочерними потоками.

кроме visible, давайте overflow: hidden в #outer. И этот путь кажется довольно простым и приличным. Мне нравится. 

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

Решение 3

Поля абсолютно помещенных коробок не рушится (даже с их дочерними потоками).

< / blockquote> 
#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

Поля блоков inline-block не сжимаются (даже с их дочерьми в потоке).

совпадает с @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> является блочным уровнем по умолчанию, поэтому вам не нужно декларировать его специально. Извините, что не смог опубликовать более двух ссылок и изображений из-за моей репутации новичка. По крайней мере, вы знаете, где проблема возникает в следующий раз, когда вы видите нечто подобное.

14
ответ дан Qiang 25 August 2018 в 09:41
поделиться

Я полагаю, что установка свойства position #inner div на относительную может также помочь в достижении эффекта. Но в любом случае я попробовал оригинальный код, вставленный в вопрос на IE9 и последний Google Chrome, и они уже дают желаемый эффект без каких-либо изменений.

1
ответ дан viditkothari 25 August 2018 в 09:41
поделиться