маржа выходит за пределы DIV, когда граница удаляется

Производный от реальной проблемы с границами и края на моем сайте я сделал этот тестовый пример, который я думаю, действует немного странно:маржа выходит за пределы DIV, когда граница удаляется

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      body { 
       background-color:black; 
      } 

      .outer { 
       width:100px;height:100px; 

      } 

      .inner { 
       margin-top:40px; 
       height:20px; 
       border:1px solid red; 
      } 


      #outer-1 { 
       background-color:blue; 

       border-top:10px solid yellow; 
      } 

      #outer-2 { 
       background-color:green; 

       border-top:none; 
      } 

      #sep { 
       background-color:white; 
      } 

     </style> 
    </head> 
    <body> 
     <div id="outer-1" class="outer"> 
      <div class="inner"> 
       CONTENT 
      </div> 
     </div> 

     <div id="sep">TEST</div> 

     <div id="outer-2" class="outer"> 
      <div class="inner"> 
       CONTENT 
      </div> 
     </div> 
    </body> 
</html>

Почему верхнее поле на «.inner» перемещается «снаружи», когда верхняя граница удаляется в # outer-2? Я бы подумал, что красная граница останется в синих и зеленых областях на относительно одном и том же месте? но это не так.

Почему? и есть ли способ заставить его выглядеть так, как я себе представлял?

источник

2013-04-12 Maya Kathrine Andersen

Это зависит от определенного браузера? Пример работает для меня в любом случае. –

Он работает так же в последних Chrome, IE и Firefox для меня. –

Поскольку поля являются злыми (и имеют тенденцию к обрушению ->is it a bug? margins of P element go outside the containig div). В вашем случае вы можете просто добавить overflow:hidden; к .outer

http://jsfiddle.net/yhAaQ/

источник

2013-04-12 20:10:01 Kaloyan

Ты спас мой день. Большое вам спасибо за фактическое решение с «переполнением: скрытым». –

Ваша проблема заключается в том, что поля - это именно то, что указано в названии: они устанавливают поля для других элементов, а не позиционируют смещения. Если два элемента расположены рядом друг с другом, с разными полями, они будут располагаться с наибольшей разницей, так что оба поля будут удовлетворены. В этом случае 2 поля присутствуют ничем, отделяющим их, поэтому логически они обрушиваются.

Использование прокладки на .outer должно решить это или относительное позиционирование. Поля являются строгими для поддержания расстояний до других элементов.

источник

2013-04-12 20:08:20

Вы бы подумали, что я знал это после работы с HTML и CSS в течение девяти лет в качестве профессионала. Я предполагаю, что браузер делает свою часть, чтобы запутать одну :-) –

Маржа на outer2 элемент рассчитывается из нижней части элемента над ним без верхнего края, приложенного к outer2 элемента. Однако, если вы добавляете границу, она вычисляется снизу границы.

Кроме того, когда нижние и верхние поля применяются к элементам, которые следуют друг за другом, они разрушаются, это как раз то, как работает модель коробки.

Если вы хотите контролировать смещение элемента внутри другого элемента, используйте прокладку.

источник

2013-04-12 20:11:44 pentzzsolt

Thx. Очень большое понимание у вас есть. –

@MonkeyZinc Рад, что я могу помочь, Мастер Йода (порядок слов у него, вы использовали: D). – pentzzsolt

body{/* just a reset to simplify example */ 
 
    padding:0; 
 
    margin:0 
 
    } 
 
    .inner { 
 
    margin-top:40px; 
 
    height:40px; 
 
    width:40px; 
 
    background-color:blue; 
 
    } 
 
    #outer{ 
 
    background-color:green; 
 
    height:60px; 
 
    width:60px; 
 
    }

<div id="outer"> 
 
    <div class="inner"> 
 
    <div class="inner"> 
 
     <div class="inner"> 
 
     <div class="inner"> 
 
      test 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Приведенный выше код является более общим случаем задачи вы упомянули. Все .inner имеют margin-top=40px в CSS. Но на самом деле, поскольку нет границы, все поля просто сворачиваются до одной конечной границы в 40 пикселей, которые «пузырятся» вне корневого родителя.

источник

2018-03-07 14:12:12 SKG

маржа выходит за пределы DIV, когда граница удаляется

ответ

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