Как работает margin?

Question

[EroticDeer]

.container {
	width: 1000px;
	height: 500px;
	background-color: cyan;

    
  border: 1px solid red;
}

.box1{
	width: 100px;
	height: 100px;
	background-color: green;
	margin-top: 200px;
	margin-left: 200px;	
}

<div class="container">
		<div class="box1">
			
		</div>

		<div class="box2">
			
		</div>

	</div>

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

На сколько я понимаю, это связанно со схлопыванием. Как этого избежать?

Comments

[Rustam Bainazarov]

И как оно там у вас задумывалось?

[Rustam Bainazarov]

Если что, border добавляет габариты блоку.

[RAX7]

Схлопывание внешних отступов

[Rustam Bainazarov]

RAX7, ЗАЛАТЫЯ СЛАВА.

Answer 1

[Rustam Bainazarov]

Я понял, что вам надо. Учите float'ы, схлопывание и добавьте float: left к .box1:

https://jsfiddle.net/3dufLw0c/

А вообще, такие вещи на float'ах уже никто не делает.

Update. Дополняя ссылку RAX7, вот ещё интересный материал:
https://ru.stackoverflow.com/questions/453411/Проб...

Comments

[Сергей Горячев]

А вообще, такие вещи на float'ах уже никто не делает.

Сам посоветовал и сам обругал %)))

[Rustam Bainazarov]

Сергей Горячев,

[Сергей Горячев]

SmthTo, да не, я без претензий :)
Из вопроса не понятно, что конкретно нужно автору и 100% решить можно нормальными методами)
А в этой ситуации это правильный ответ %)))

[Rustam Bainazarov]

Сергей Горячев, да я понимаю, самому смешно, если честно :))