3

Почему при изменении свойства border меняются отступы снизу и сверху?
Есть код, приведенный ниже, он с border (в content_wrap ), и он отображается так

1

Если убрать border, то будет выглядеть так:

2

Листинг:

#content_wrap{
  border: 1px solid rgba(255, 255, 255, 0.65);
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: 20px;
  width: 980px;
  background-color:red;
}
#content{
  position: relative;
  margin: 20px 20px 20px 20px;
  padding: 10px 10px;
  background-color: green;
}
<div id="content_wrap">
    <div id="content">
        <div id="top_menu">
            <li>СТУДЕНТАМ</li>
            <li>ОРДИНАТОРАМ</li>
            <li>Аспирантам</li>
            <li>Слушателям</li>
            <li>Контакты</li>
        </div>
     </div>
</div>

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 25 сент. 2015 в 13:47

2 ответа 2

2

Такое явление называется margin collapsing. Ссылка на документацию.

Горизонтальные margin'ы никогда не схлопываются, а вот с вертикальными все немного сложнее.

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

.b-wrapper {
  background-color: yellow;
}
.b-first {
  height: 100px;
  background-color: moccasin;
}
.b-second {
  height: 100px;
  background-color: magenta;
}
<div class="b-wrapper">
  <div class="b-first">
  </div>
  <div class="b-second">
  </div>
</div>

Смежные (перекрывающиеся) margin'ы не схлопываются в следующих ситуациях:

  1. если один из элементов корневой (html), пример на jsFiddle;
  2. этот пункт связан с понятием clearance, он может возникнуть, когда блоку приходится "оплывать", тогда margin'ы не схлопываются (правдиво для случаев, когда у элементов нет padding или border). Можно поиграться на jsFiddle, если убрать clear: both;, то margin'ы схлопнуться. Вообще тема с плавающими (имеющими float: *) блоками заслуживают отдельного вопроса;
  3. если один элемент вложен в другой и родительский имеет border или padding, тогда на вложенном элементе margin не схлопнется jsFiddle.

Теперь можно сказать и о случаях, когда они все таки схлопываются:

  1. если элементы находятся друг за другом в одном block formatting context (его создают внутри себя все элементы с float, абсолютным позиционированием, элементы, которые ведут себя, как блочные (inline-block, table-cell, table-caption), но не имеют display: block , и соответственно элементы с display: block) и margin положительный у обоих, то результатом будет больший jsFiddle, а если какой-либо margin отрицателен, тогда результирующим значением margin'а будет их сумма, причем, если сумма получится отрицательной, то элементы наложатся друг на друга jsFiddle;
  2. если один элемент вложен в другой и родительский не имеет border или padding, или clearence, тогда вложенный элемент не будет отступать от родительского, а их margin'ы схлопнуться и у родительского будет больший из них, jsFiddle;
  3. если блок не формирует block formatting context , а потомки имеют подсчитанную min-height: 0, height: auto или подсчитанную height: 0, то его верхний и нижний margin будет схлопываться jsFiddle.
3
  • Всё четко, спасибо Rolandius . Я понял, что мой случай подходит под пункт 2 в списке, когда схлопываются. Третий пункт не особо понял )) Commented 26 сент. 2015 в 8:34
  • Я так понял, чтобы в моём случае Margin не схлопывался, оптимальным решением будет использовать border 1px цвета фона или padding 1px Commented 26 сент. 2015 в 8:44
  • @ilya-direct, в Вашем случае, я бы просто сделал у внешнего контейнера padding, а у внутреннего margin бы убрал.
    – Rolandius
    Commented 27 сент. 2015 в 11:07
0

border: 1px solid rgba(255, 255, 255, 0.65); - это бордюр белого цвета.
Он, как суслик... "Видишь суслика? - Нет. - А он есть!" - (c) ДМБ

Замените на rgba(0,0,0,1) и Вы его увидите.

Отступ пропадает потому без бордюра нет точки отсчета для margin.
Попробуйте заменить все margin на padding: 10px;

1
  • Вы немного неправы. Отступ пропадает не из-за этого, а по причине margin collapsing
    – Rolandius
    Commented 25 сент. 2015 в 7:58

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.