Τις περισσότερες φορές, για να καθορίσετε το μέγεθος των εσοχών σε σελίδες HTML, χρησιμοποιούνται οι δυνατότητες της γλώσσας CSS (Cascading Style Sheets). Αν και στην ίδια τη γλώσσα HTML υπάρχουν πολλά «υποτυπώδη» υπολείμματα, επιτρέποντας σε ορισμένες περιπτώσεις να ορίσουν εσοχές. Παρακάτω είναι οι επιλογές που χρησιμοποιούνται πιο συχνά, αλλά εκτός από αυτές υπάρχουν ακόμη πολλά διαφορετικά είδη κόλπων που σας επιτρέπουν να ορίσετε εσοχές για μη τυπική σήμανση εγγράφων HTML.
Είναι απαραίτητο
Βασικές γνώσεις γλωσσών HTML και CSS
Οδηγίες
Βήμα 1
Προσδιορίστε το στοιχείο σελίδας από το οποίο θα εσοχή. Για παράδειγμα, εάν το κείμενο τοποθετηθεί μέσα στην ετικέτα … (μπλοκ), τότε αυτό το μπλοκ θα είναι το γονικό στοιχείο για αυτό το κείμενο και η εσοχή θα πρέπει να μετρηθεί από τα όρια του μπλοκ. Και αν το κείμενο (ή η εικόνα) δεν βρίσκεται μέσα σε στοιχεία μπλοκ (div, li κ.λπ.) ή ενσωματωμένα (span, p, κ.λπ.), τότε ο γονέας του θα είναι το σώμα του εγγράφου (ετικέτα σώματος) Ο ορισμός ενός γονικού στοιχείου για το κείμενο είναι απαραίτητος γιατί αυτός πρέπει να ορίσει τις περιγραφές των στυλ που σχηματίζουν τις εσοχές. Ας υποθέσουμε ότι το κείμενό σας τοποθετείται μέσα σε ένα μπλοκ div: Δείγμα κειμένου
Βήμα 2
Χρησιμοποιήστε την ιδιότητα περιθωρίου γλώσσας CSS για να ορίσετε περιθώρια, δηλαδή, την απόσταση από τα όρια ενός στοιχείου σε παρακείμενα στοιχεία, καθώς και στα όρια του γονικού στοιχείου. Αυτή η απόσταση μπορεί να ρυθμιστεί ξεχωριστά για την επένδυση σε κάθε πλευρά: margin-top - πάνω, margin-right - στα δεξιά, margin-bottom - στο κάτω μέρος, margin-αριστερά - στα αριστερά. Για το παραπάνω παράδειγμα, αυτός ο κώδικας css μπορεί να έχει την εξής μορφή: div {
margin-top: 10 εικονοστοιχεία;
margin-right: 15 εικονοστοιχεία;
margin-bottom: 40 εικονοστοιχεία;
περιθώριο αριστερά: 70 εικονοστοιχεία;
} Εδώ "div" είναι ένας επιλογέας που καθορίζει ότι αυτό το στυλ πρέπει να εφαρμόζεται σε όλα τα div στον κώδικα εγγράφου. Η σύνταξη CSS σας επιτρέπει να συνδυάσετε και τις τέσσερις γραμμές σε μία: div {
περιθώριο: 10px 15px 40px 70px;
} Οι τιμές των εσοχών πρέπει πάντα να καθορίζονται με αυτήν τη σειρά: πρώτα - στην κορυφή, στη συνέχεια - στα δεξιά, κάτω και αριστερά. Εάν οι εσοχές είναι ίδιες σε όλες τις πλευρές, τότε αρκεί να καθορίσετε την τιμή μία φορά: div {
περιθώριο: 70 εικονοστοιχεία;
} Επιπλέον, μπορείτε να ορίσετε ένα κινούμενο οριζόντιο περιθώριο (δηλαδή, αριστερά και δεξιά). Αυτό μπορεί να είναι πολύ χρήσιμο όταν πρέπει να ορίσετε ένα μπλοκ δεδομένου πλάτους ακριβώς στο κέντρο του παραθύρου του προγράμματος περιήγησης. Το ίδιο το πρόγραμμα περιήγησης καθορίζει αυτόματα πόση εσοχή πρέπει να είναι και στις δύο πλευρές, αν γράψετε την ακόλουθη δήλωση CSS: div {
περιθώριο: 0 αυτόματη;
}
Βήμα 3
Χρησιμοποιήστε την ιδιότητα padding για να ορίσετε το padding, η οποία είναι η απόσταση από το περίγραμμα ενός στοιχείου σε οποιαδήποτε στοιχεία τοποθετούνται μέσα σε αυτό, συμπεριλαμβανομένου του κειμένου. Η σύνταξη για αυτήν την ιδιότητα είναι ακριβώς η ίδια με την ιδιότητα περιθωρίου: div {
επένδυση: 10px;
επένδυση δεξιά: 15 εικονοστοιχεία;
κάτω μέρος: 40px;
επένδυση-αριστερά: 70 εικονοστοιχεία;
} Ή div {
επένδυση: 10px 15px 40px 70px;
}
Βήμα 4
Χρησιμοποιήστε την ιδιότητα text-indent για να ορίσετε την πρόσθετη εσοχή για την πρώτη γραμμή κάθε παραγράφου του κειμένου. Για παράδειγμα: div {
κείμενο-εσοχή: 80px;
}
Βήμα 5
Χρησιμοποιήστε τα χαρακτηριστικά hspace και vspace της ετικέτας HTML img για να ορίσετε την οριζόντια και κατακόρυφη εσοχή από την εικόνα στα εξωτερικά στοιχεία, αντίστοιχα. Για παράδειγμα, όπως αυτό:
Βήμα 6
Χρησιμοποιήστε το χαρακτηριστικό cellpadding της ετικέτας πίνακα, εάν θέλετε να ορίσετε την εσοχή από τα όρια των κελιών στον πίνακα στο περιεχόμενό τους. Και το χαρακτηριστικό cellpacing ορίζει την απόσταση μεταξύ κελιών πίνακα. Για παράδειγμα:
| 1 | 2 |
