Почему margin привязывается к соседнему контейнеру? / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Почему margin привязывается к соседнему контейнеру?

3 сообщений из 3, страница 1 из 1

Почему margin привязывается к соседнему контейнеру?

#36097101

Свят

Гость

Почему margin привязывается к соседнему контейнеру, а не к родителю?
Вот код:

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.

<body style="margin:0; padding:0;">  
	
        <div id="body" style="width:1024px;border:1px solid black;position:relative">
            <table width="1000px" height="120px" cellspacing="10" border="1"  style="margin-left:12px;margin-top:12px;position:relative">
                <tr>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_1" />
                    </td>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_2" />
                    </td>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_3" />            
                    </td>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_4" />           
                    </td>
                </tr>
            </table>
            <div id="logo" style="width:1024px;height:90px;margin-left:0px;margin-top:134px;position:relative; border:1px double blue;">
                <jdoc:include type="modules" name="Main_Menu" />
            </div>
            <div id="authorization" style="width:1024px;height:36px;margin-left:0px;margin-top:224px;border:1px double red;">
                <jdoc:include type="modules" name="Authorization" />
            </div>
            <div id="Menu" style="width:236px;float:left;margin-left:22px;margin-top:260px; border:1px double blue;">
                <jdoc:include type="modules" name="Menu" />
            </div>
            <div id="content" style="width:733px;float:left; margin-right:22px;margin-top:260px;border:1px double blue;">
                <jdoc:include type="modules" name="Content" />
            </div>
            <div id="header_advertising" style="width:240px;height:36px;float:left;margin-left:22px;margin-bottom:244px;">
                <jdoc:include type="modules" name="Header_Advertising" />
            </div>
            <div id="other_news" style="width:494px;height:36px;float:left;margin-left:264px;margin-bottom:244px;">
                <jdoc:include type="modules" name="header_Other_news" />
            </div>
            <div id="news_partner" style="width:242px;height:36px;float:left;margin-left:758px;margin-bottom:244px;">
                <jdoc:include type="modules" name="header_News_partner" />
            </div>        
            <div id="flash_container" style="width:236px;height:200px;float:left;margin-left:22px;margin-bottom:34px; border:1px double blue;">
                <jdoc:include type="modules" name="Flash_container" />
            </div>
            <table id="other_news_content" width="462px" height="200px"  border="1" bordercolor="#00FF33" style="float:left;margin-left:280px;margin-bottom:34px;">
                <tr>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_5" />
                    </td>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_6" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_7" />
                    </td>
                    <td>
                        <jdoc:include type="modules" name="Graphic_text_block_8" />
                    </td>
                </tr>
            </table>	
            <div id="news_partner_content" style="width:232px;height:200px;float:left;margin-left:764px;margin-bottom:34px; border:1px double blue;">
                <jdoc:include type="modules" name="News_partner_content" />
            </div>
            <div id="footer" style="width:1024px;height:23px;float:left;margin-bottom:0px; border-top:1px solid #999999;">
                <jdoc:include type="modules" name="Footer" />
            </div>
        </div>
</body>

В ресультате просто бред получился, я делал привязку к краям div#body, а контейнеры привязалиь к краям друг друга :(

...

Рейтинг:

0 / 0

18.07.2009, 22:26

| Ответить | Цитировать | Написать

Почему margin привязывается к соседнему контейнеру?

#36097341

Свят

Гость

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

...

Рейтинг:

0 / 0

19.07.2009, 12:01

| Ответить | Цитировать | Написать

Почему margin привязывается к соседнему контейнеру?

#36097723

illion

Участник

Сообщения: 1 288

Рейтинг: 0 / 0

Свят,
метод тыка конечно хорошо, но в данном случае книжка по css была бы во сто крат эффективнее.

1. margin ни к каким соседям не привязывается. margin - это поле элемента, а не отступ элемента от родителя. Поэтому, если Вы для второго (третьего и т.д.) потомка задаете margin-top:30px, то это именно поле вокруг этого элемента, а не отступ от верха родителя.
То, что Вы пытались реализовать, делается обычно абсолютным позиционированием потомков (position:absolute; top:10px; left:50px, при условии, что у родителя задано position:relative), а не свободным перемещением (float).

2. float не влият на margin напрямую. float исключает элемент из нормального потока документа, что, в свою очередь, вносит коррективы в отображение элемента.

...

Рейтинг:

0 / 0

20.07.2009, 02:09

| Ответить | Цитировать | Написать

3 сообщений из 3, страница 1 из 1

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&fpage=285&tid=1454499]:	0ms
get settings:	7ms
get forum list:	9ms
check forum access:	3ms
check topic access:	3ms
track hit:	51ms
get topic data:	6ms
get forum data:	2ms
get page messages:	26ms
get tp. blocked users:	1ms
others:	236ms

total:	344ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы