Προηγούμενο

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

Προηγούμενο