html — Почему не работает параметр «margin-top»?

Вопрос задан

Изменён 6 лет 8 месяцев назад

Просмотрен 20k раз

Параметр у #slider: http://jsfiddle.net/NPBrq/2/

    #header {
        width: 100%;
    }
    #header-holder {
        background-color: #ccc;
        margin: 35px auto 20px auto;
        width: 950px;
    }
    #slider {
        background-color: red;
        clear: both;
        height: 335px;
        margin-top: 20px;
        width: 100%;
    }
    #slider-holder {
        margin: 0px auto;
        width: 950px;
    }
    <html>
    <body>
        
        <div>
            <div>
               <div></div>
               <div></div>
            </div>
        </div>
        
        <div>
            <div>
               LOREM
            </div>
        </div>
        
    </body>
    </html>
  • html
  • css
2

Почитайте про CSS коллапс.

Плюс, вам поможет такая фенька:

#header-holder{
    width:950px;
    margin: 35px auto 20px auto;
    background-color:#cccccc;
    overflow: hidden;/*Фенька*/
}

Отвечая на вопрос прямо: Хидер у вас схлопывается. Просто потому что он «не чувствует» флоатовых элементов внутри. Подтверждение — отсутствие серого фона хидера(#ccc) в вашем примере. Костыль для решения — сделать overflow-hidden. Тогда он автоматически надуется, если не указывать высоту.

Из-за схлопывания хидера, элемент, у которого clear:both, «думает», что он и так достаточно далеко от хидера, чтобы включать маргин. Этот эффект называется коллапс отступов(попробуйте поставить вертикально два элемента с разными маргинами. Победит тот, у кого маргин больше, меньший просто схлопнется в него.)

#div1{
margin-bottom: 20px;
}
#div2{
margin-top: 10px;
}

будет выглядеть так, будто между ними только 20 px.

3

Поставил float:left и все заработало:

#slider{
   width:100%;
   margin-top:20px;
   clear:both;
   float:left;
}

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

Добавляем в CSS:

. clearer {
   clear: both;  
}

И сразу после лого и меню:

<div>
   <div></div>
   <div></div>
   <br>
</div>

Вообщем-то все 🙂

Если вам не навится дополнительный тег, которому действительно там не место, то обратите внимание на такую штуку — clearfix.

jsfiddle

Вместо clearer прорабатываем этот clearfix:

.clearfix:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    overflow:hidden;
}
.clearfix {
    display: block;
}
.clearfix {
    //display: inline-block;
}
* html .clearfix {
    height: 1%;
}

И тогда ваш HTML останется таким, каким вы его хотели изначально:

<div>
   <div></div>
   <div></div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

css — Почему не работает margin-top?

Вопрос задан

Изменён 5 лет 2 месяца назад

Просмотрен 1k раз 

.statistic-bg {
  background-color: #10c9c3;
  height: 240px;
}

.statistic {
  margin-top: 95px;
  margin-left: 100px;
}
<div>
  <div>
    <div>
      <i></i>
      <h3>512</h3>
      <p>projects completed</p>
    </div>
  </div>
</div>

если добавить после div .stasistic-bg &nbsp все срабатывает хорошо. Можно вообще пользоваться таким приёмом? Или это считается плохим тоном?

1

Происходит схлопывание вертикальных margin.

Если у родительского эл-та нет ограничивающих факторов (padding,border), то маргин переходит от внутреннего элемента к внешнему. Потом по старой схеме выбирается маргин: если они одноименные, то выбирается больший, если разноименные, то происходит сложение. И в результате вы и получили свои странности.

Но, как быть, если нам это не нужно и мы хотим, чтобы див-родитель остался на своем месте, а див-ребенок отодвинулся на вниз?

Можно отменить это действие по отношению к родителю, есть несколько способов.

  1. задавание padding родительскому блоку

  2. задавание border родительскому блоку

  3. задавание overflow родительскому блоку, любое значение кроме visible (работает везде, кроме старых ИЕ)

Пример задаем родителю

overflow:auto;

.statistic-bg {
  background-color: #10c9c3;
  height: 240px;
  overflow:auto;
}
.layout {
}
.statistic {
  margin-top: 95px;
  margin-left: 100px;
}
<div>
  <div>
    <div>
      <i></i>
      <h3>512</h3>
      <p>projects completed</p>
    </div>
  </div>
</div>

Официальная документация по этому вопросу https://www. w3.org/TR/CSS2/box.html

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

html.

Почему этот стиль CSS margin-top не работает?

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

Решение 1

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

это означает, что я могу добавить float:left либо #внешний , либо #внутренний demo1.

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

Решение 2

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

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

 #внешний{
    ширина: 500 пикселей;
    высота: 200 пикселей;
    фон: #FFCCCC;
    поле: 50px авто;
    переполнение: скрыто;
}
#внутренний {
    фон: #FFCC33;
    высота: 50 пикселей;
    поле: 50 пикселей;
}

Решение 3

Поля абсолютно позиционированных блоков не схлопываются (даже с их дочерними элементами).

 #внешний{
    ширина: 500 пикселей;
    высота: 200 пикселей;
    фон: #FFCCCC;
    поле: 50px авто;
    положение: абсолютное;
}
#внутренний{
    фон: #FFCC33;
    высота: 50 пикселей;
    поле: 50 пикселей;
}

или

 #внешний{
    ширина: 500 пикселей;
    высота: 200 пикселей;
    фон: #FFCCCC;
    поле: 50px авто;
    положение: родственник;
}
#внутренний {
    фон: #FFCC33;
    высота: 50 пикселей;
    поле: 50 пикселей;
    положение: абсолютное;
}

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

Решение 4

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

совпадает с Enderskill

Решение 5

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

Это не имеет большого отношения к вопросу, так как это разрушающееся поле между братьями и сестрами. обычно это означает, что верхний блок имеет margin-bottom: 30px , а родственный блок имеет margin-top: 10px . Общий отступ между ними 30px вместо 40px .

Решение 6

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

Это очень интересно, и я могу просто добавить одну верхнюю границу

 #outer{
    ширина: 500 пикселей;
    высота: 200 пикселей;
    фон: #FFCCCC;
    поле: 50px авто;
    граница-верх: 1px сплошной красный;
    
}
#внутренний {
    фон: #FFCC33;
    высота: 50 пикселей;
    поле: 50 пикселей;
    
}

Кроме того,

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

html — Margin-top не работает для тега и?

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 73 тысячи раз

Я пытался реализовать margin-top для кнопки ссылки, но это вообще не работает. Я также пробовал встроенные стили для тегов «p» и «a».

Есть 3 элемента li, я не размещал здесь весь код, так как он такой же, как и первый элемент li.

HTML

 

    <ул>
        
  • 
            
            
    Служба 1
    
            
    Amet nisi porttitor enim parturient, cras! Odio pulvinar a cras? Сиди в соц.  Augue tempor mid rhoncus nec nisi ac pulvinar dictumst
    
            
    Подробнее
    
        
    •

    Вот код CSS для приведенного выше HTML. css-код:

     #services{
    цвет фона: #afc1ff;
    высота: 490 пикселей;
    набивка: 5%;
    верхняя граница: 5px сплошная #4972ff;
    нижняя граница: 5px сплошная #4972ff;
}
 #услуги ул{
/* цвет фона: красный; */
    маржа: 0;
    отступ слева: 10px;
    отступ: 0 0 0 50 пикселей;
}
#услуги ул ли{
    отображение: встроенный блок;
    ширина: 22%;
    набивка: 1%;
    маржа: 0 4% 0 4%;
    цвет: #4c4c4c;
    размер шрифта: 14px; размер шрифта: 1.4rem;
    выравнивание текста: по центру;
}
.сервис-заголовок{
    размер шрифта: 18 пикселей; размер шрифта: 1.8rem;
}
#услуги уль ли а{
    цвет фона: #4972 и далее;
    цвет: #fff;
    нижняя граница: 3px сплошная #779bff;
    радиус границы: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    отступ: 8px;
    поле сверху: 10px;
}
    • html
    • css
    • margin

    Эта проблема известна как Margin Collapse и иногда возникает между верхними и нижними полями блочных элементов.

    Поля соседних одноуровневых элементов свернуты

    Поэтому на 9 не работает маржа0011 р тег. Чтобы заставить его работать здесь, можно использовать padding-top в теге p.

    А для тега a поле не работает, потому что это встроенный элемент. Возможно, вам потребуется изменить его свойство display на inline-block или block .

    2

    Тег является встроенным элементом и поэтому не может иметь верхнего или нижнего поля. Но вы можете решить это, применив дисплей: встроенный блок; к нему.

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

     #services{
дисплей: блок;
поле сверху: 8px;
}

    или просто вы можете работать с его отступом

    Попробуйте это:

     #services ul li a{
    цвет фона: #4972ff;
    цвет: #fff;
    нижняя граница: 3px сплошная #779bff;
    радиус границы: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    отступ: 8px;
    положение: родственник;
    верх: 10 пикселей;
}

    Вы не сможете установить поле для тега , не установив сначала значение display:block; .

    В вашем случае нужно сделать примерно так:

     #services ul lip {
отступ: 8px;
верхнее поле: 10px;}

    Была такая же проблема, только поле слева и справа работало решил это, изменив отображение на flex

     position: absolute;
/* Этот код css может вам помочь.*/
    1

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

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

    No related posts.