За последние 24 часа нас посетили 17680 программистов и 1655 роботов. Сейчас ищут 885 программистов ...

Почему не работает (margin) сверху

Тема в разделе "Вопросы от блондинок", создана пользователем Catrina, 28 май 2015.

  1. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Код (PHP):
    1. <!DOCTYPE html>
    2. <html>
    3. <body>
    4. <div style="width: 400px; height: 400px; outline: 1px solid black;">
    5.     <div style="width: 200px; height: 200px; outline: 1px solid red; margin: 15px;">
    6.     </div>
    7. </div>
    8. </body>
    9. </html>
    10.  
    margin: 15px, как я понимаю должен делать отступ со всех сторон, а тут отступ слева есть, а сверху нет.
    Браузер - опера.
     
  2. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    все он делает. просто он отступает от верхней границы окна браузера а не от родительского элемента. это видно если в отладчике наводвить на элементы дерева и смотреть визуальное расположение блоков на странице.
     
  3. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    Всё правильно. У вас блок внутри блока. У внешнего блока не заданы внутренние отступы, сделовательно, margin внутреннего блока отсчитывает не от них, а от отступов body. Установите во внешнем блоке padding:0; вам понравится.

    Добавлено спустя 2 минуты 4 секунды:
    А нет, чёто я соврал насчёт padding:0;
    а вот с padding:1px; работает...
     
  4. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    mr.akv, ты практически прав с нулевым внутренним отступом. только его надо дать body ;)
     
  5. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Но слева то он отступает от блока, а сверху от body. В чём разница.
    Кстати, float: left, установленное для внутреннего блока меняет поведение на ожидаемое.
    Но почему отступ сверху не работает без float: left; Почемуууу????
     
  6. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    ноль эмоций чёт. А вот паддинг в 1 пиксель на первом диве (или вообще любой положительный) складывает паддинг внешнего и маргин внутреннего
     
  7. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Иногда мне кажется, что вёрстка - это какая-то магия, где без заклинания и бубна ничего не работает. ;)
     
  8. mr.akv

    mr.akv Активный пользователь

    С нами с:
    31 мар 2015
    Сообщения:
    1.604
    Симпатии:
    206
    Пф. Я и жениться без этого не смогу.
     
  9. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Там понятно, привороты/отвороты и всё такое. Но тут, казалось бы, точные науки, а по факту, каждый браузер что хочет, то и вытворяет)))
    Вот как такое может быть?
     
  10. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    Потому что есть рекомендации для браузеров, а они уже делают как считают нужным.
     
  11. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.771
    Адрес:
    :сердА
    Гугли reset.css, полезный лайфхак.