Блог

Главная - Вопросы по программированию - Проблема с полями при переносе DIV

Проблема с полями при переносе DIV

#css

#css

Вопрос:

Я пытаюсь обернуть вызываемый div content другим div, который имеет другой фон. Однако, при использовании «margin-top» с content div, кажется, что переносящий DIV получает margin-top вместо content div.

Код:

 <!DOCTYPE html>
<html>
  <head>
  <style>
    html {
        background-color:red;
    }
    #container-top {
        background-color: #ccc;
        overflow: hidden;
        padding-top: 10px;
        border-bottom: 1px solid #000;
        height:30px;
    }

    #container-bottom {
        background-color: #F1F4F2;
    }
    #content {
        margin-top:20px;
    }
    </style>
  </head>
  <body>
      <div id="container-top">
      </div>
      <div id="container-bottom">
          <div id="content">
              Hello
          </div>
      </div>
  </body>
</html>

Итак, в примере div container-bottom получает margin-top вместо content div.

Я обнаружил, что если я добавлю символ внутри container-bottom , это устранит проблему.

   <div id="container-bottom">
      **A**
      <div id="content">
          Hello
      </div>

Но, конечно, это не очень хорошее решение…

Спасибо,

Джоэл

Ответ №1:

То, что происходит, называется сворачиванием полей.

Если два поля (только верхнее и нижнее, а не правое или левое) двух элементов соприкасаются (или в вашем случае верхнее поле внутреннего div касается верхнего поля внешнего div), используется максимальное расстояние между ними (в вашем случае max (0, 20) = 20) и размещается как можно дальше от соприкасающихся элементов (в вашем случае за пределами контейнера div (самого внешнего элемента)).

Чтобы устранить это поведение, вы должны поместить что-то между двумя полями -> подойдет заполнение в верхней части контейнера div.

 #container-bottom {
    background-color: #F1F4F2;
    padding-top: 1px;
}
#content {
    margin-top:19px;
}

другое решение (работает, но может не соответствовать вашим потребностям):

вы можете просто поместить отступ размером 20 пикселей в контейнер div:

 #container-bottom {
    background-color: #F1F4F2;
    padding-top: 20px;
}
#content {
}

для получения дополнительной информации на этой странице это очень хорошо объясняется: Margin Collapsing

Ответ №2:

Вы могли бы попробовать добавить неразрывный пробел в #container-bottom:

 <div id="container-bottom">
    amp;nbsp;
    <div id="content">
        Hello
    </div>
</div>

Это подходящее решение, поскольку оно часто используется, чтобы сообщить браузеру, что элемент не является пустым (некоторые браузеры игнорируют пустые элементы).

Ответ №3:

Margin-top — загадочное существо из-за своих свойств свертывания. Я обнаружил, что самое простое решение этой проблемы — применить отступ в 1 пиксель к div в нижней части контейнера и изменить размер поля в верхней части содержимого на 19 пикселей.