Πώς να δημιουργήσετε το Whitespace HTML

Δημιουργήστε χώρους και φυσικό διαχωρισμό στοιχείων σε HTML με CSS

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

Αυτός δεν είναι ο τρόπος με τον οποίο λειτουργεί η διαστασιολόγηση του ιστότοπου.

Έτσι, πώς προσθέτετε τα whitespaces σε HTML που εμφανίζονται στην ιστοσελίδα ; Αυτό το άρθρο εξετάζει ορισμένους από τους διαφορετικούς τρόπους.

Χώροι σε HTML με CSS

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

Στο CSS, μπορείτε να χρησιμοποιήσετε είτε τα περιθώρια είτε τις ιδιότητες padding για να προσθέσετε χώρο γύρω από τα στοιχεία. Επιπλέον, η ιδιότητα text-indent προσθέτει χώρο στο μπροστινό μέρος του κειμένου, όπως για την εσοχή των παραγράφων.

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

Π {
κείμενο-παύλα: 3em;
}}

Χώροι σε HTML: Μέσα στο κείμενό σας

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

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

Ακολουθεί ένα παράδειγμα για το πώς να προσθέσετε πέντε κενά μέσα σε μια γραμμή κειμένου:

Αυτό το κείμενο έχει πέντε πρόσθετους χώρους μέσα του

Χρησιμοποιεί το HTML:

Αυτό το κείμενο έχει & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; πέντε επιπλέον χώρους μέσα σε αυτό

Μπορείτε επίσης να χρησιμοποιήσετε την ετικέτα
για να προσθέσετε επιπλέον διαλείμματα γραμμής.

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




Γιατί το Spacing σε HTML είναι κακή ιδέα

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

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

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

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

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

Π {
padding-bottom: 20px;
}}

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

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

Χρησιμοποιώντας αυτές τις ενσωματωμένες επιλογές διαχωρισμού HTML μπορεί να είναι μια ολισθηρή πλαγιά. Ενώ ένας ή δύο δεν μπορεί να βλάψει τον ιστότοπό σας, εάν συνεχίσετε τη διαδρομή αυτή, θα εισαγάγετε προβλήματα στις σελίδες σας. Στο τέλος, προτιμάτε να στραφείτε σε CSS για απόσταση HTML και σε όλες τις άλλες οπτικές ανάγκες ιστοσελίδας.