Πώς να δημιουργήσετε επιπλέον χώρο σε HTML ή σε μια ιστοσελίδα

Η δημιουργία πρόσθετου χώρου στην HTML σας σε μια ιστοσελίδα μπορεί να επιτευχθεί με πολλούς τρόπους ανάλογα με τον τύπο χώρου που θέλετε να δημιουργήσετε. Οι παρακάτω ενότητες περιέχουν πολλούς από τους διαφορετικούς τρόπους δημιουργίας επιπλέον χώρου χρησιμοποιώντας HTML και CSS.

Ένα από τα πιο συγκεχυμένα πράγματα για τους νέους χρήστες που δημιουργούν τη δική τους ιστοσελίδα είναι ότι δεν μπορούν να πατήσουν το πλήκτρο διαστήματος πολλαπλάσιες φορές για να δημιουργήσουν πρόσθετους χώρους. Για να δημιουργήσετε πρόσθετους χώρους πριν, μετά ή μεταξύ των κειμένων σας, χρησιμοποιήστε το (μη σπάζοντας χώρο) εκτεταμένο χαρακτήρα HTML.

Για παράδειγμα, με "επιπλέον χώρο" έχουμε τον ακόλουθο κώδικα στο HTML μας.

 επιπλέον χώρο 

Σημείωση: Εάν χρησιμοποιείτε ένα πρόγραμμα επεξεργασίας WYSIWYG για να εισάγετε τον παραπάνω κώδικα, πρέπει να είστε στην καρτέλα HTML ή να επεξεργαστείτε τον κώδικα HTML.

  • Πλήρης κατάλογος εκτεταμένων ειδικών χαρακτήρων HTML.

Διατηρήστε αποστάσεις σε κείμενο που επικολλάται σε μια σελίδα

Εάν επικολλάτε κείμενο με επιπλέον κενά ή καρτέλες, μπορείτε να χρησιμοποιήσετε το HTML

 ετικέτα για να διατηρήσετε το μορφοποιημένο κείμενο. Παρακάτω είναι ένα παράδειγμα του τρόπου επικόλλησης κειμένου με επιπλέον κενά χρησιμοποιώντας το 
 ετικέτα.

 Το κείμενο αυτό έχει πολλούς χώρους 

Το παραπάνω παράδειγμα γίνεται χρησιμοποιώντας τον παρακάτω κώδικα HTML.

 Το κείμενο αυτό έχει πολλούς χώρους 

Σημείωση: Εάν χρησιμοποιείτε ένα πρόγραμμα επεξεργασίας WYSIWYG για να εισαγάγετε τον παραπάνω κωδικό, πρέπει να είστε στην καρτέλα HTML ή να επεξεργαστείτε τον κώδικα HTML.

  • Δείτε το HTML
     για περισσότερες πληροφορίες σχετικά με αυτήν την ετικέτα.

Δημιουργία επιπλέον χώρου γύρω από ένα στοιχείο ή αντικείμενο

Οποιοδήποτε στοιχείο HTML μπορεί να έχει πρόσθετο διάστημα που προστίθεται στην κορυφή, δεξιά, κάτω ή αριστερά. Ωστόσο, είναι σημαντικό να κατανοήσετε τη διαφορά μεταξύ περιθωρίου και παρεμβολής πριν αποφασίσετε ποιο είδος χώρου θέλετε να προσθέσετε γύρω από το στοιχείο ή άλλο αντικείμενο. Όπως μπορείτε να δείτε στην παρακάτω εικόνα, το περίβλημα είναι αυτό που περιβάλλει αμέσως το στοιχείο, μέσα στα όρια και το περιθώριο έξω από το περίγραμμα.

Στο παρακάτω παράδειγμα, η παράγραφος μας περιβάλλεται από ένα περιθώριο, με ένα περιθώριο, και έχει χώρο στο δεξιό και το κάτω μέρος της παραγράφου.

Παράδειγμα παραγράφου με περιθώριο και παρεμβολή.

Το παραπάνω παράδειγμα δημιουργήθηκε χρησιμοποιώντας τον παρακάτω κώδικα.

Παράδειγμα παραγράφου με περιθώριο και παρεμβολή.

Στο πρώτο τμήμα του κώδικα, "margin-left: 2.5em;" προσθέτει ένα αριστερό περιθώριο των 2, 5 em, το οποίο δίνει την εμφάνιση του χαραγμένου κειμένου. Όπως φαίνεται από το παράδειγμα, αυτή η απόσταση είναι εκτός των συνόρων. Στην επόμενη ενότητα, "padding: 0 7em 2em 0;" ορίζει το επάνω, το δεξιό, το κάτω και το αριστερό (δεξιόστροφα) παραγεμισμένο πλαίσιο. Υπάρχει "0" επάνω padding, "7em" δεξιά padding, "2em" βάσης padding, και 0 αριστερά padding. Το υπόλοιπο παράδειγμα αυτού καθορίζει τον τρόπο εμφάνισης των συνόρων.

Δημιουργία καρτέλας χρησιμοποιώντας CSS και HTML

Μια καρτέλα μπορεί να δημιουργηθεί σε HTML προσαρμόζοντας το αριστερό περιθώριο ενός στοιχείου. Για παράδειγμα, αυτή η παράγραφος έχει ένα αριστερό περιθώριο 2, 5 em από το στοιχείο που περιέχει το κείμενο. Το CSS για να δημιουργήσετε αυτό το αριστερό περιθώριο εμφανίζεται παρακάτω.

 .tab {margin-left: 2.5em} 

Αφού τοποθετήσουμε αυτόν τον κώδικα στο αρχείο CSS, μπορούμε να εφαρμόσουμε την κλάση "tab" σε οποιοδήποτε κείμενο για να δημιουργήσουμε την εμφάνιση μιας καρτέλας. Η τιμή του αριστερού περιθωρίου μπορεί να αυξηθεί ή να μειωθεί ανάλογα με τις ανάγκες σας.

Παρόλο που συνιστούμε την παραπάνω μέθοδο, το CSS περιθωρίου αριστερά μπορεί επίσης να προστεθεί σε γραμμή όπως φαίνεται στο παρακάτω παράδειγμα.

Ένα παράδειγμα ενός αριστερού περιθωρίου 5εμ.

Ένα παράδειγμα ενός αριστερού περιθωρίου 5εμ.

  • Πώς μπορώ να παριστώ ένα κείμενο ή μια καρτέλα στην ιστοσελίδα μου ή σε HTML;

Αν χρειάζεται να προσθέσετε επιπλέον χώρο κάτω από μια γραμμή ή μια παράγραφο κειμένου και πρέπει να το κάνετε μόνο μία φορά, μπορείτε να χρησιμοποιήσετε το

ετικέτα για να προσθέσετε επιπλέον χώρο σε ένα έγγραφο. Ακολουθεί ένα παράδειγμα του τρόπου με τον οποίο μπορεί να εφαρμοστεί αυτή η τεχνική.

Αυτή η πρόταση περιέχει παράδειγμα κειμένου.

Όπως μπορείτε να δείτε, προστέθηκαν δύο διαλείμματα για να δημιουργήσετε τον παραπάνω χώρο.

Ο παραπάνω κώδικας θα δημιουργούσε το παρακάτω κείμενο.

Αυτή η πρόταση περιέχει παράδειγμα κειμένου.

Όπως μπορείτε να δείτε, προστέθηκαν δύο διαλείμματα για να δημιουργήσετε τον παραπάνω χώρο.

Μπορούν να προστεθούν επιπλέον διαλείμματα αν χρειαστεί. Ωστόσο, σας συνιστούμε να χρησιμοποιήσετε τη μέθοδο CSS που αναφέρθηκε νωρίτερα για να προσθέσετε παραγεμίσματα και διαστήματα γύρω από το κείμενό σας, αν γίνει σε πολλά σημεία μιας σελίδας.