Εργασία με τα περιθώρια margin στο CSS

Τώρα θα αναλύσουμε την ιδιότητα margin, που ορίζει τα περιθώρια μεταξύ των στοιχείων μιας ιστοσελίδας. Ας δούμε πώς αυτό φαίνεται στην πράξη.

Για αρχή, θα σας παρουσιάσω δύο ενσωματωμένα το ένα στο άλλο μπλοκ χωρίς margin (θα κολλήσουν και θα δούμε διπλό σύνορο):

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 στο εσωτερικό μπλοκ:

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;
}

Результат: