странные отступы :)

@Hagrael · Регистрация: 07.01.2010

Студворк — интернет-сервис помощи студентам

Вот у меня такой код:

HTML5
1
2
3
4
5
<div>
<div style="float: left;">LOL<br>LOL</div>
<div style='margin-left: 100px; margin-top: 100px;'>AHTUNG</div>
<div style='clear: both;'></div>
</div>

Но почему-то род. div смещается с внутренним! Почему?

@Prividenie · 13.10.2010, 14:35

HTML5
1
<div style='float: left; margin-left: 100px; margin-top: 100px;'>AHTUNG</div>

хотя тоже как то ненормально

Добавлено через 13 минут
надо убрать margin-left: 100px, а в первом прописать ширину

@Hagrael · 13.10.2010, 14:57 **[ТС]**

Prividenie, не, мне надо чтоб второй див растягивался на всё остальное место, тка что float поставить не выйдет!

@Prividenie · 13.10.2010, 15:39

потер...

@Hagrael · 13.10.2010, 15:44 **[ТС]**

Prividenie, не понял.

@Prividenie · 13.10.2010, 15:47

та я его стер, не есть хорошо.... это не решение проблемы

@Hagrael · 13.10.2010, 18:08 **[ТС]**

Кто-нибудь может помочь ещё?

@npofopr · 14.10.2010, 00:43

зачем вам маржин лефт? и топ? лучше картинку того что хотите

@Hagrael · 14.10.2010, 15:32 **[ТС]**

npofopr, я хочу разобраться в том, почему margin-top передаётся родителю, а не перемещает элемент относительно родителя.

Добавлено через 3 часа 7 минут
Если поставить float: left у род. div'a, то всё ОК, но по какому-такому правилу без float страница ведёт себя так странно О_о

@romchiksoad · 15.10.2010, 06:55

Hagrael, Вот это Вам не подойдет?

HTML5
1
2
3
4
5
<div>
<span>LOL<br>LOL</span>
<span style='margin-left: 100px; margin-top: 100px;'>AHTUNG</span>
<div>Текст под двумя предыдущими блоками</div>
</div>

Вам это надо?

@Hagrael · 15.10.2010, 14:31 **[ТС]**

romchiksoad, это не то, что я хочу увидеть. Там правый "блок" не съезжает вниз, т. к. inline-элементы имеют только margin-left и margin-right. А ваще я просто хочу понять, margin-top у div'a смещает BODY О_о

@romchiksoad · 15.10.2010, 17:22

Hagrael, так Вы просто укажите размеры блока:

HTML5
1
2
3
4
5
<div style="width: 10%; height: 100px;">
<div style="float: left;">LOL<br>LOL</div>
<div style='margin-left: 100px; margin-top: 100px;'>AHTUNG</div>
<div style='clear: both;'></div>
</div>

Так же можно "поиграть" с максимальными и минимальными размерами ( max-width, min-width ) блока.

@Hagrael · 15.10.2010, 18:48 **[ТС]**

romchiksoad, вы видимо неправильно меня поняли. Вот то, что выходит на вашем примере:
Название: 15.10.png
Просмотров: 109

Размер: 916 байт

А мне-то надо вот так:
Название: 15.10_1.png
Просмотров: 107

Размер: 871 байт

Такого я добился следующим кодом:

HTML5
1
2
3
4
<div style='float: left;'>
    <div style='float: left;'>menu</div>
    <div style='margin-left: 100px; margin-top: 100px;'>content</div>
</div>

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

HTML5
1
2
3
4
<div>
    <div style='float: left;'>menu</div>
    <div style='margin-left: 100px; margin-top: 100px;'>content</div>
</div>

тут отступ делается от самого html! body также смещается! А должен смещаться только div с надписью "content". А левый div должен оставаться на месте. По какому правилу браузер себя так ведёт?

@Hagrael · 17.10.2010, 07:44 **[ТС]**

Так знает ли кто-нибудь, почему так?

Добавлено через 17 часов 54 минуты
SOS

@romchiksoad · 17.10.2010, 10:10

Сообщение от Hagrael

тут отступ делается от самого html!

Как так? HTML не видимый элемент. Он не влияет на отображение страницы. Отступ может делаться относительно всего окна браузера.

Сообщение от Hagrael

А должен смещаться только div с надписью "content". А левый div должен оставаться на месте.

Быть может Вам поможет position: relative; ?

@Hagrael · 17.10.2010, 13:11 **[ТС]**

romchiksoad, нет

Это не помогает.
Вот код на данный момент:

HTML5
1
2
3
4
<div style='position: relative;'>
    <div style='float: left;'>menu</div>
    <div style='margin-left: 100px; margin-top: 100px;'>content</div>
</div>

Никак не пойму почему так...

@lesha_firs · 18.10.2010, 15:52

Сообщение от Hagrael

romchiksoad, нет

Это не помогает.
Вот код на данный момент:

HTML5
1
2
3
4
<div style='position: relative;'>
    <div style='float: left;'>menu</div>
    <div style='margin-left: 100px; margin-top: 100px;'>content</div>
</div>

Никак не пойму почему так...

посмотри может быть наследуеться гденебуть выше!
и после любого незначительного float лучше использовать <br clear="all" />
вот пример

HTML5
1
2
3
4
<div style='position: relative;'>
    <div style='float: left;'>menu</div>
    <div style='margin-left: 100px; margin-top: 100px;'>content</div>
</div><br clear="all" />

Добавлено через 44 секунды
а лучше так

HTML5
1
2
3
4
<div style='position: relative;float:none'>
        <div style='float: left;'>menu</div>
        <div style='margin-left: 100px; margin-top: 100px;'>content</div>
</div><br clear="all" />

@Hagrael · 18.10.2010, 16:28 **[ТС]**

lesha_firs, нет, ни от чего не наследуется. Наоборот переносится вверх

@lesha_firs · 18.10.2010, 16:36

карочи я тока такой вариант нашел

HTML5
1
2
3
4
<div style="position: relative; float: none;">
        <div style="float: left; width: 151px; margin: -76px 0px 0px 0px;">menu</div>
        <div style="margin-top: 71px; width: auto; margin-left: 300px;">content</div>
</div>

@Hagrael · 18.10.2010, 16:46 **[ТС]**

Отрицательными margin'ами? Но из-за чего весь этот сумбур ты можешь объяснить? Мне это надо узнать. Из-за чего отступ идёт от окна браузера, а не от контейнера?

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	13.10.2010, 14:57 [ТС]
	Prividenie, не, мне надо чтоб второй див растягивался на всё остальное место, тка что float поставить не выйдет! 0

@Prividenie 74 / 73 / 25 Регистрация: 05.10.2008 Сообщений: 233
	13.10.2010, 15:39
	потер... 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	13.10.2010, 15:44 [ТС]
	Prividenie, не понял. 0

@Prividenie 74 / 73 / 25 Регистрация: 05.10.2008 Сообщений: 233
	13.10.2010, 15:47
	та я его стер, не есть хорошо.... это не решение проблемы 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	13.10.2010, 18:08 [ТС]
	Кто-нибудь может помочь ещё? 0

@npofopr 11 / 11 / 1 Регистрация: 10.06.2010 Сообщений: 34
	14.10.2010, 00:43
	зачем вам маржин лефт? и топ? лучше картинку того что хотите 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	14.10.2010, 15:32 [ТС]
	npofopr, я хочу разобраться в том, почему margin-top передаётся родителю, а не перемещает элемент относительно родителя. Добавлено через 3 часа 7 минут Если поставить float: left у род. div'a, то всё ОК, но по какому-такому правилу без float страница ведёт себя так странно О_о 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	15.10.2010, 14:31 [ТС]
	romchiksoad, это не то, что я хочу увидеть. Там правый "блок" не съезжает вниз, т. к. inline-элементы имеют только margin-left и margin-right. А ваще я просто хочу понять, margin-top у div'a смещает BODY О_о 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	17.10.2010, 07:44 [ТС]
	Так знает ли кто-нибудь, почему так? Добавлено через 17 часов 54 минуты SOS 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.10.2010, 16:28 [ТС]
	lesha_firs, нет, ни от чего не наследуется. Наоборот переносится вверх 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.10.2010, 16:46 [ТС]
	Отрицательными margin'ами? Но из-за чего весь этот сумбур ты можешь объяснить? Мне это надо узнать. Из-за чего отступ идёт от окна браузера, а не от контейнера? 0