Почему margin не отступает от всех границ род. элемента?

Question

[noboxer]

Привет всем! :)
Почему margin не отступает от всех границ род. элемента, если указан margin: 30px; ?
(на фото div с параграфом, внутри body)
Это потому, что указан фиксированный размер блока?

Comments

[Rustam Bainazarov]

Код?

И я не совсем понял вопроса, если честно.

[noboxer]

Рустам Байназаров, я хочу понять логику по которой работает расположение и масштабирование.
Кода пару строк:
html:
body > div(c классом) > p
css:
у класса параметры:
margin:30px;
width: 500px;

[noboxer]

Рустам Байназаров, и Вам копи/паст) Почему css работает так, что когда ты указываешь margin 30px (т.е. отступ со всех сторон), элемент делает этот отступ только слева и сверху? Браузер учитывает, тот нюанс, что со всех сторон невозможно отступить по 30px и просто игнорирует 2 параметра из 4х ?

[Rustam Bainazarov]

noboxer, да, всё работает так, как надо. Поэтому я и не понял вопроса. Что вы ожидаете увидеть? Желтым подсвечена зона работы margin:



Если вы хотите, чтобы блок отступал от края body, то у меня для вас плохие новости, т. к. margin — это внешний отступ от элемента, а не отступ от родителя.

Ежели вы не это имеете в виду, то я вообще не понимаю, в чём прикол, т. к. вы сами задали ширину 500 пикселей элементу, а показываете на скриншоте экран, который шире его. Естественно, что справа от него будет пустое место. А отступ снизу — ясное дело, т. к. блок у вас ниже высоты экрана.

По-моему, это чрезвычайно очевидно...

Answer 1

[WapSter]

Если честно хз что вы имеете ввиду, лучше песочницы делайте. Ну, а так схлопывание марджинов

Comments

[noboxer]

сложно сформулировал. Почему css работает так, что когда ты указываешь margin 30px (т.е. отступ со всех сторон), элемент делает этот отступ только слева и сверху? Браузер учитывает, тот нюанс, что со всех сторон невозможно отступить по 30px и просто игнорирует 2 параметра из 4х ?

[WapSter]

noboxer, он их не игнорирует. Будет отступ в 30px со всех сторон.

[noboxer]

WapSter, а от чего тогда отступает 30px, правый и нижний margin ?
(если левый и верхний - отталкиваются от границ)

[WapSter]

noboxer, от границ окна, если блоку не хватает места. В остальных случаях они просто есть, либо отталкиваются от соседних блоков.

[noboxer]

WapSter, но справа и снизу отступ больше, чем 30px :)
Он точно не "опускает" эти 2 параметра, из-за такого противоречия?
Или я не правильно понимаю принцип работы margin?

[noboxer]

WapSter, и что означает "делать песочницы" ?))

[WapSter]

noboxer, только справа в браузере отобразится 30пх как будто он длинный, но это не так. Существует у блочной модели поток не позволяющий двум блокам находится на одном уровне. А где снизу нет отступа?

[noboxer]

WapSter, не знал об этом. и что означает "делать песочницы" ?

[WapSter]

noboxer, https://codepen.io/wapster92/pen/OJyjeER

[noboxer]

WapSter, кстати на счёт нижнего отступа. Я подумал, что его нет, потому как div вложен в body (границы которого не определены).

[WapSter]

noboxer, body по умолчанию размером с окно браузера или с контент, если контент больше размеров окна браузера.

[noboxer]

WapSter, ладно, буду честен, всё равно
до конца понимаю от чего нижний отступ в 30пк "отталкивается")
Со временем пойму принцип, спасибо.

[noboxer]

WapSter, Пока совсем не понятно, как он с этих сторон делает отступ))

[WapSter]

noboxer, прочти что такое марджин. Там нет отступов, там просто пустое пространство.

[Rustam Bainazarov]

noboxer, я вам ответил в комментариях, откуда пустое пространство. Это не отступ, а просто пустое пространство вокруг. Вы кладете в одну большую коробку коробку сильно меньше, очевидно, что будет пустое пространство от границ.

[noboxer]

WapSter, а, т.е. по-факту получается так ??

[WapSter]

noboxer, открой devtools и просто посмотри как оно есть.

[noboxer]

WapSter, посмотрел, только справа большой большой отступ. спасибо!
Все как ты писал.