Box model

Με τον όρο Box model περιγράφεται η περιοχή γύρω από κάθε στοιχείο HTML. 

Μπορείτε να το φανταστείτε ως ένα αόρατο κουτί όπου τα στοιχεία βρίσκονται μέσα.

 Box Model

Αυτά τα "κουτιά" αποτελούνται από τέσσερα στρώματα.

  • Το πρώτο είναι το περιεχόμενο (content). Το περιεχόμενο είναι το πραγματικό κείμενο ή πολυμέσο (media) που έχουμε μέσα στο στοιχείο μας.
  • Το δεύτερο είναι το διάκενο - padding. Το Padding είναι η περιοχή γύρω από το περιεχόμενό μας.
  • Το τρίτο είναι το περίγραμμαborder, περιβάλλει τόσο την περιοχή padding όσο και το περιεχόμενο. Το περιθώριο μπορεί να εμφανιστεί στη σελίδα χρησιμοποιώντας την ιδιότητα CSS "border" δίνοντας της τιμές.
  • Το τέταρτο είναι το περιθώριοmargin. Το περιθώριο περιβάλλει όλα τα παραπάνω και ορίζει την απόσταση από τα άλλα "κουτιά" στοιχείων στον κώδικα μας.
Παράδειγμα

The CSS rules:

<html lang="en">
  <head>
      <title>Style - CSS</title>
      <style>
        p{
           width: 33%;
           text-align: left;
           font-size: 0.75em;
           color: #006600;
           background: #fefecd;
           padding: 2%;
           margin: 0.75em;
           border-width: 10px;
           border-style: dotted;
           border-color: #900000;
        }
      </style>
  </head>
  <body>
      <h4>This is a Heading 4</h4>
      <p>This is lorem ipsum paragraph: <br>
           Lorem ipsum dolor sit amet, ea nec probo eloquentiam, in esse quando laboramus sea. <br>
           Ne omnesque detraxit eam, cu qui movet affert volutpat. <br>
           Qui amet option eu. Utamur euismod hendrerit vel no, ius natum salutatus forensibus in. <br>
           Sea diceret vivendo constituam at, duo an adhuc viderer evertitur.
      </p>
  </body>
</html>

θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

Box model properties

Περισσότερες πληροφορίες για το Box model: https://www.w3schools.com/css/css_boxmodel.asp

Περισσότερες πληροφορίες για τα Borders: https://www.w3schools.com/css/css_border.asp

Περισσότερες πληροφορίες για το Margin: https://www.w3schools.com/css/css_margin.asp

Περισσότερες πληροφορίες για το Padding: https://www.w3schools.com/css/css_padding.asp