Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблема с margin во вложенных DIV

Автор: tolkien 14.4.2009, 08:11

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
body { margin: 0; padding: 0;}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{margin: 0; padding: 0;}

#block1
{
    background-color: red;
    width:200px;
    height: 300px;
}

#block2
{
    background-color: yellow;
    width:200px;
    height: 200px;
}

#block3
{
    background-color: pink;
    width:200px;
    height: 50px;
        margin-top:10px;
}

</style>
</head>
<body>
<div id="block1">
<div id="block2">
<div id="block3">
</div>
</div>
</div>

</body>
</html>

Я запутался в том как работает margin. В выше примере я не понимаю. Почему все 3 блока сдвигаются получают отступ 10пк. Я ставлю отступ только для 3 блока. Поэтому 1 и 2 ой должны остаться на месте но они сдвигаются вместе с 3-им. Или я неправильно понимаю как работает margin?

П.С Браузер FX 2.0

Автор: Aliance 14.4.2009, 09:17

http://htmlbook.ru/css/margin.html

Автор: ksnk 14.4.2009, 09:19

imho, FF глючит. Експлорер показывает правильно.

Возможные лечения
-- поставить вместо марджина padding-top у #block2.
-- добавить элемент 1px высоты в #block2 перед #block3

Автор: bars80080 14.4.2009, 09:28

вместо

Код


body { margin: 0; padding: 0;}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{margin: 0; padding: 0;}

достаточно написать

Код


* { margin: 0; padding: 0;}

оно захватит и те элементы, которые вы не учли

Автор: Violator 14.4.2009, 10:14

#block2 {padding-top:1px}

http://forum.vingrad.ru/forum/topic-244993/anchor-entry1768042/0.html

Автор: tolkien 14.4.2009, 12:56

Цитата(Violator @ 14.4.2009, 10:14)

#block2 {padding-top:1px}

http://forum.vingrad.ru/forum/topic-244993/anchor-entry1768042/0.html

второй блок просто исчез

Добавлено через 2 минуты и 56 секунд

Цитата(Aliance @ 14.4.2009, 09:17)

http://htmlbook.ru/css/margin.html

Да я там был. Написано что margin-top это отступ от верхней границы текущего элемента до родительского элемента. Но результат не соответ описанию.

Автор: liliana2 14.4.2009, 13:44

Цитата(Aliance @ 14.4.2009, 09:17)

Вам бы стоило изучить блочную модель
вот здесь есть иллюстрация
http://rmcreative.ru/blog/post/css3-i-blochnaja-model
Есть еще очень хорошая статья, но пока не могу найти
вообще марджин это внешняя граница блока

Автор: tolkien 14.4.2009, 14:09

liliana2
Тогда можете объяснить какой должен быть результат у кода который я привел в первом посте. Мои ожидания не совпадают с тем что я вижу в результате. Если вы мне поможете на конкретном указанном мною примере. Я буду очень вам благодарен.

Пока склоняюсь к тому что это баг FF.

Автор: NDenis 14.4.2009, 15:43

tolkien, это магия, http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/#collapsing-margins

Автор: ksnk 14.4.2009, 15:56

Цитата

Схлопывание границ - не глюк и не ошибка браузеров. Это специально придуманное поведение.

Yes!!! Охотно верю, особенно потому, что лечение этого "придуманного поведения" как всегда возможно только через анальное отверстие smile

... А у нас все так... smile

Автор: Violator 15.4.2009, 11:14

tolkien,
добавить padding-top:1px; к существующему классу, а не заменить

Код


#block2
{
    background-color: yellow;
    width:200px;
    height: 200px;
    padding-top:1px;
}