Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   непонятки с margin-top (https://javascript.ru/forum/xhtml-html-css/33272-neponyatki-s-margin-top.html)

torsar 16.11.2012 18:37
непонятки с margin-top
 
Вложений: 1
<!DOCTYPE html>
<html>
	<head>
		<title>Свойства блока - css</title>
	</head>
	<style type="text/css">
		.div1 {background-color:red;
				width:200px; height:200px;
			}
		.div2 {background-color:blue;
				border-style:solid;
				border-color:grey;
				margin-top:70px; margin-left:30px;}
	</style>
	<body>
		<div class="div1">
			<div class="div2">Текст внутри блока.</div>
		</div>
	</body>
</html>


margin-left:30px; у css класса div2 работает, как
и ожидалось - голубой блок(смотри рисунок во вложении)
смещается вправо относительно красного.
margin-top:70px; Я ожидал, что голубой блок(класс css div2) будет
смещаться относительно красного вниз на 70 пикселей.
А почемуто смещается красный относительно body
Непонятка какаято.

walik 16.11.2012 19:30
К примеру добавьте 
overflow: hidden;
к .div1

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Обходим схлопывание margin

ruslan_mart 17.11.2012 17:35
torsar, потому что нужно задать абосютную позицию. Используйте лучше padding.

ivan-klimov 19.11.2012 14:21
Еще сработает добавление к .div2{float: left;}. Но тут есть подводный камешек: Если у .div1 НЕ задана высота, то он схлопнется. Это нужно учитывать.

Также сработает добавление к .div2{position: relative; top:70px;}. Соответственно убираем margin-top.

Лучше, чтоб Вы описали задачу подробнее(как должен работать блок, будет ли он пополняться контентом и т.д). Тогда Вам порекомендовали бы нужный способ :)

ksa 19.11.2012 15:10
Цитата:
Сообщение от ivan-klimov
Еще сработает добавление к .div2{float: left;}
...
Также сработает добавление к .div2{position: relative; top:70px;}
Оба варианта ущербны...

ivan-klimov 20.11.2012 14:20
Цитата:
Сообщение от ksa (Сообщение 216710)
Оба варианта ущербны...
Раз ущербны, жду Ваших аргументов!

Нельзя утвердждать, что какие либо варианты ущербны, все зависит от конкретной ситуации, нужно знать как предпологается использовать этот блок. В данном случае мы этого не знаем и предлагаем ТС различные варианты.

Все известные свойства в сочетании друг с другом делают верстку устойчивой, универсальной. А рубить сплеча мол это свойство учщербное, не используйте его - ЭТО бред.

ksa 20.11.2012 14:25
Цитата:
Сообщение от ivan-klimov
жду Ваших аргументов
Ответ уже дал walik...

ivan-klimov 20.11.2012 15:56
Цитата:
Сообщение от ksa (Сообщение 216879)
Ответ уже дал walik...
А Вы читали ссылки которые он указал? Видимо нет! Так как первая ссылка на спецификацию, где описывается проблема и пути решения, а вторая также на сайт где рассматривается эта же проблема, так вот в конце подведены итоги, где пишут, что каждый случай индивидуален. Все зависит от конкретной задачи.

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

По этому считаю Ваш пост об отдельно выбранных ущербных свойствах, бредом.

tenshi 20.11.2012 20:47
а тут с красивыми рисуночками http://softwaremaniacs.org/blog/2005...-flow-margins/

ksa 21.11.2012 08:41
Цитата:
Сообщение от ivan-klimov
По этому считаю Ваш пост об отдельно выбранных ущербных свойствах, бредом.
Дело твое... :D


Часовой пояс GMT +3, время: 04:45.