Как реализовать зазор между дивом и страницей?

Question

[ZhukovMisha]

Как реализовать зазор между дивом и страницей с помощью CSS.
Пример как тута.

Answer 1

[Andrew]

DevTools вам покажет, что там полоски фиксированные, с каждой из сторон

Comments

[ZhukovMisha]

А возможно ли сделать полоски не фиксированные?

[Rustam Bainazarov]

ZhukovMisha, и что бы это значило?

[Rustam Bainazarov]

ZhukovMisha, это?




И т. д.

Вообще, вариантов много сделать такую рамку: border, div'ы, box-shadow, padding'и и т. п. Каждый из которых служит определенной цели.

[ZhukovMisha]

Рустам Байназаров, Да,это то что я думал))

[runprogr]

Так а в чем проблема то ?) Ставим margin: 20px; для боди и все

[Rustam Bainazarov]

runprogr, не совсем, т. к. в случае наличия фона у body, margin просто сдвинет контент, но фон останется вплотную к краям экрана (визуально будет как padding). В этом случае надо делать доп. обёртку для контента и уже на него вешать фон (второй пример).

Но мне кажется, проще сделать, как в моём первом, с помощью border на body.

[strelok011]

Рустам Байназаров Можно еще на html добавить паддинг. Будет отступ для body :)

[Rustam Bainazarov]

strelok011, но лучше так не делать :))

[strelok011]

Рустам Байназаров если делаем на боди бордер, что нас удержит? :)

[Rustam Bainazarov]

strelok011, только если вера в бога (но это навряд ли, конечно). Просто в некоторых версиях Firefox и Safari были разные баги стилизации именно тега html.

В Firefox не помню, что, а в Safari получался непрокручиваемый body.

А со стилизацией body багов не помню.

[strelok011]

Рустам Байназаров ну, если уж совсем глубоко копать и не вводить в заблуждение читателей, то надо посмотреть эту статью для начала https://webformyself.com/html-protiv-body-v-css/

[Rustam Bainazarov]

strelok011, не совсем понял про заблуждение. Это просто практика мировая — не стилизовать тег html без крайней необходимости, например, задать жёсткие размеры шрифта для последующей игры с em/rem.

Пока нет времени посмотреть статью, к сожалению.

[strelok011]

Цитата:
"Очень заманчиво предполагать, что любые стили, которые должны быть унаследованы на протяжении всего документа, следует задавать прямо для html, потому что это корневой элемент документа. Элемент html превосходит элемент body по иерархии, поэтому было бы логично, чтобы именно для него задавались все глобальные стили.

Но на деле выходит не совсем так. На самом деле, следующие инлайн атрибуты были изначально присвоены в спецификации элементу body:"

background
bgcolor
marginbottom
marginleft
marginright
margintop
text