Работа с отступами margin на CSS

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

Для начала приведу вам два вложенных друг в друга блока без margin (они слипнутся и мы увидим двойную границу):

<div id="parent"> <div id="child"></div> </div> #parent { width: 300px; border: 1px solid red; } #child { height: 100px; border: 1px solid green; }

:

А теперь давайте зададим margin в 30px внутреннему блоку:

<div id="parent"> <div id="child"></div> </div> #parent { width: 300px; border: 1px solid red; } #child { height: 100px; border: 1px solid green; margin: 30px; }

:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу: