Làm việc với margin thụt lề trong CSS

Bây giờ chúng ta sẽ tìm hiểu về thuộc tính margin, thiết lập khoảng cách thụt lề giữa các phần tử của trang web. Hãy xem cách nó hoạt động trong thực tế.

Đầu tiên, tôi sẽ cho bạn xem hai khối lồng nhau không có margin (chúng sẽ dính vào nhau và chúng ta sẽ thấy đường viền kép):

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  height: 100px;
  border: 1px solid green;
}

Результат:

Và bây giờ hãy đặt margin 30px cho khối bên trong:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}

#child {
  height: 100px;
  border: 1px solid green;
  margin: 30px;
}

Результат: