Ο τρόπος με τον οποίο τα προγράμματα περιήγησης χειρίστηκαν το κενό διάστημα στην αρχή δεν είναι πολύ διαισθητικός, ειδικά αν συγκρίνετε τον τρόπο με τον οποίο το Hypertext Markup Language χειρίζεται τον κενό χώρο σε σχέση με τα προγράμματα επεξεργασίας κειμένου. Στο λογισμικό επεξεργασίας κειμένου, μπορείτε να προσθέσετε πολλά διαστήματα ή καρτέλες στο έγγραφο και ότι το διάστημα θα αντικατοπτρίζεται στην εμφάνιση του περιεχομένου του εγγράφου. Αυτός ο σχεδιασμός WYSIWYG δεν ισχύει για HTML ή ιστοσελίδες.
Διάστημα σε εκτύπωση
Στο λογισμικό επεξεργασίας κειμένου, οι τρεις κύριοι χαρακτήρες κενών διαστημάτων είναι οι χώρος, αυτί, και επιστροφή μεταφοράς. Κάθε ένας από αυτούς τους χαρακτήρες ενεργεί με διαφορετικό τρόπο, αλλά σε HTML, τα προγράμματα περιήγησης τα καθιστούν όλα ουσιαστικά τα ίδια. Είτε τοποθετείτε ένα διάστημα είτε 100 κενά στο δικό σας Σήμανση HTML ή συνδυάστε το διάστημά σας με καρτέλες και επιστροφές μεταφοράς, όλα αυτά θα συμπυκνωθούν σε ένα κενό όταν η σελίδα αποδίδεται από το
πρόγραμμα περιήγησης. Στην ορολογία σχεδιασμού ιστοσελίδων, αυτό είναι γνωστό ως κατάρρευση του λευκού χώρου. Δεν μπορείτε να χρησιμοποιήσετε αυτά τα τυπικά πλήκτρα διαστήματος για να προσθέσετε κενό διάστημα σε μια ιστοσελίδα επειδή το πρόγραμμα περιήγησης συμπτύσσει επαναλαμβανόμενα κενά σε έναν μόνο χώρο όταν αποδίδεται στο πρόγραμμα περιήγησης,Χρήση CSS για τη δημιουργία καρτελών HTML και Spacing
Οι ιστότοποι σήμερα δημιουργούνται με διαχωρισμό δομής και στυλ. Η δομή μιας σελίδας αντιμετωπίζεται από HTML, ενώ το στυλ υπαγορεύεται από Cascading Style Sheets. Για να δημιουργήσετε διαστήματα ή να επιτύχετε μια συγκεκριμένη διάταξη, μεταβείτε στο CSS αντί να προσθέσετε χαρακτήρες διαστήματος στον κώδικα HTML.
Εάν προσπαθείτε να χρησιμοποιήσετε καρτέλες για να δημιουργήσετε στήλες κειμένου, αντί να το χρησιμοποιήσετε
Εάν τα δεδομένα που σχεδιάζετε είναι δεδομένα πίνακα, χρησιμοποιήστε πίνακες για να ευθυγραμμίσετε αυτά τα δεδομένα όπως θέλετε. Οι πίνακες παρουσιάζουν συχνά κακό ραντεβού στο σχεδιασμό ιστοσελίδων επειδή κακοποιήθηκαν ως καθαρά εργαλεία διάταξης για τόσα χρόνια, αλλά οι πίνακες εξακολουθούν να είναι απόλυτα έγκυροι εάν το περιεχόμενό σας περιέχει πραγματικά δεδομένα πίνακα.
Περιθώρια, επένδυση και εσοχή κειμένου
Οι πιο συνηθισμένοι τρόποι δημιουργίας διαστήματος με CSS είναι χρησιμοποιώντας ένα από τα ακόλουθα στυλ CSS:
- περιθώριο
- υλικό παραγεμίσματος
- κείμενο-εσοχή
Για παράδειγμα, εσοχή της πρώτης γραμμής μιας παραγράφου όπως μια καρτέλα με το ακόλουθο CSS (σημειώστε ότι αυτό προϋποθέτει ότι η παράγραφος σας έχει ένα χαρακτηριστικό κλάσης του "πρώτου" συνδεδεμένο σε αυτό):
στ. πρώτα {
κείμενο-εσοχή: 5em;
}
Αυτή η παράγραφος περιλαμβάνει περίπου πέντε χαρακτήρες.
Χρησιμοποιήστε τις ιδιότητες περιθωρίου ή γεμίσματος στο CSS για να προσθέσετε κενά στην κορυφή, κάτω, αριστερά ή δεξιά (ή συνδυασμούς αυτών των πλευρών) ενός στοιχείου. Εξασφαλίστε κάθε είδους απόσταση που απαιτείται μεταβαίνοντας στο CSS.
Μετακίνηση κειμένου σε περισσότερα από ένα κενά χωρίς CSS
Εάν το μόνο που θέλετε είναι να μετακινηθεί το κείμενό σας περισσότερο από ένα κενό από το προηγούμενο στοιχείο, χρησιμοποιήστε το μη σπάσιμο χώρο.
Για να χρησιμοποιήσετε το μη σπάσιμο χώρο, προσθέτετε όσες φορές το χρειάζεστε στη σήμανση HTML.
Η HTML σέβεται αυτά τα μη σπασμένα κενά και δεν θα τα συμπτύξει σε ένα κενό διάστημα. Ωστόσο, αυτή η προσέγγιση θεωρείται κακή πρακτική δεδομένου ότι προσθέτει επιπλέον σήμανση HTML σε ένα έγγραφο μόνο για να επιτύχει τις ανάγκες διάταξης. Όταν είναι εφικτό, αποφύγετε την προσθήκη μη σπασμένων χώρων απλά για να επιτύχετε το επιθυμητό εφέ διάταξης και χρήση Περιθώρια CSS και επένδυση αντι αυτου.