VPF::Проблема с margin во вложенных DIV - Форум программистов

tolkien

Дата 14.4.2009, 08:11 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 5.4.2008

Репутация: нет
Всего: 4

Код


<!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

Это сообщение отредактировал(а) tolkien - 14.4.2009, 08:12

Aliance

Дата 14.4.2009, 09:17 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 14.4.2009, 09:19 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

bars80080

Дата 14.4.2009, 09:28 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

вместо

Код


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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

#block2 {padding-top:1px}

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

tolkien

Дата 14.4.2009, 12:56 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 5.4.2008

Репутация: нет
Всего: 4

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

#block2 {padding-top:1px}

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

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

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

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

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

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

liliana2

Дата 14.4.2009, 13:44 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 178
Регистрация: 19.11.2007

Репутация: нет
Всего: нет

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

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

tolkien

Дата 14.4.2009, 14:09 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 5.4.2008

Репутация: нет
Всего: 4

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

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

Это сообщение отредактировал(а) tolkien - 14.4.2009, 14:09

NDenis

Дата 14.4.2009, 15:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

tolkien, это магия, поверьте

ksnk

Дата 14.4.2009, 15:56 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата

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

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

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Violator

Дата 15.4.2009, 11:14 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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

Код


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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »