Αυτό το εγχειρίδιο θα σας διδάξει τη διαδικασία δημιουργίας χώρου μεταξύ δύο συνδέσμων.
Ας αρχίσουμε!
Πώς να δώσετε χώρο ανάμεσα σε δύο συνδέσμους σε HTML & CSS;
Για να δώσετε χώρο μεταξύ δύο συνδέσμων, πρώτα απ 'όλα, προσθέστε τους απαιτούμενους συνδέσμους στο αρχείο HTML.
Βήμα 1: Προσθήκη συνδέσμων σε HTML
Σε HTML, θα δημιουργήσουμε ένα κοντέινερ χρησιμοποιώντας την ετικέτα
HTML
< div >< ένα href = “https://linuxhint.com/create-html-file/” > Πώς να δημιουργήσετε ένα αρχείο HTML; < / ένα >
< ένα href = “https://linuxhint.com/edit-html-file/” > Πώς να επεξεργαστείτε ένα αρχείο HTML; < / ένα >
< / div >
Η παρακάτω εικόνα δείχνει ότι οι σύνδεσμοι προστέθηκαν με επιτυχία:
Βήμα 2: Δώστε στυλ στο Div & Link
Σε αυτό το βήμα, διαμορφώστε το στυλ του div και του συνδέσμου χρησιμοποιώντας ' div ” σε CSS. Θα προσαρμόσουμε την επένδυση σε ' 40 εικονοστοιχεία ' και ορίστε το μέγεθος γραμματοσειράς των συνδέσμων ως ' μεγαλύτερος ', το ύψος του div ορίζεται ως ' 150 εικονοστοιχεία ' και χρησιμοποιήστε την ιδιότητα φόντου και ορίστε το χρώμα του div ως ' μαύρος '. Μετά από αυτό, προσαρμόστε το πλάτος περιγράμματος ως ' 5 εικονοστοιχεία ', στυλ ως ' διακεκομμένη 'και χρώμα ως ' rgb(251, 255, 0) '.
CSS
div {υλικό παραγεμίσματος : 40 εικονοστοιχεία ;
μέγεθος γραμματοσειράς : μεγαλύτερος ;
ύψος : 150 εικονοστοιχεία ;
Ιστορικό : μαύρος ;
σύνορο : 5 εικονοστοιχεία διακεκομμένη rgb ( 251 , 255 , 0 ) ;
}
Χρησιμοποιώντας τον παραπάνω κώδικα, προκύπτει η ακόλουθη έξοδος. Όπως μπορείτε να δείτε, τόσο το div όσο και οι σύνδεσμοι έχουν στυλ:
Βήμα 3: Δώστε χώρο μεταξύ δύο συνδέσμων οριζόντια
Μπορούμε να δώσουμε χώρο μεταξύ δύο συνδέσμων οριζόντια χρησιμοποιώντας HTML και CSS. Εδώ, θα εξηγήσουμε και τις δύο μεθόδους μία προς μία.
Μέθοδος 1: Χρήση HTML
Για να δώσετε χώρο μεταξύ των συνδέσμων χωρίς να γράψετε κανένα εξωτερικό CSS, μπορείτε να χρησιμοποιήσετε το ' ' στο HTML όπου θέλετε να δημιουργήσετε χώρο. ' ” σημαίνει μη σπάζοντας χώρο. Στο αρχείο HTML, η προσθήκη ενός σημαίνει ένα διάστημα. Εάν θέλετε να δώσετε περισσότερο χώρο, δεν είναι προτιμότερο να προσθέσετε χειροκίνητα σύμφωνα με τον απαιτούμενο αριθμό διαστημάτων.
Ας προχωρήσουμε στο παράδειγμα για να κατανοήσουμε τη δηλωμένη έννοια!
Παράδειγμα
Εδώ, θα γράψουμε τέσσερις φορές ' ” για να δημιουργήσετε χώρο μετά τον πρώτο σύνδεσμο με τέτοιο τρόπο ώστε ο δεύτερος σύνδεσμος να εμφανίζεται μετά τα τέσσερα κενά.
HTML
< div >< ένα href = “https://linuxhint.com/create-html-file/” > Πώς να δημιουργήσετε ένα αρχείο HTML; < / ένα >
Πώς να επεξεργαστείτε ένα αρχείο HTML;
Όπως μπορείτε να δείτε, δημιουργείται χώρος στη δεξιά πλευρά του πρώτου συνδέσμου:
Μέθοδος 2: Χρήση CSS
Στο CSS, θα χρησιμοποιήσουμε το ' περιθώριο-δεξιά ” ιδιότητα να δίνει χώρο μεταξύ δύο συνδέσμων. Ο ' περιθώριο-δεξιά Η ιδιότητα ' χρησιμοποιείται για την προσθήκη χώρου από τη δεξιά πλευρά του στοιχείου. Μπορείτε επίσης να ορίσετε τις αρνητικές τιμές για αυτό.
Σύνταξη
Η σύνταξη της ιδιότητας margin-right δίνεται παρακάτω:
περιθώριο-δεξιά : αξίαΣτη θέση του « αξία ”, ορίστε το περιθώριο από τη δεξιά πλευρά του στοιχείου. Ας συνεχίσουμε το παράδειγμα.
Παράδειγμα
Εδώ, θα χρησιμοποιήσουμε ' ένα ” για πρόσβαση στον σύνδεσμο που έχουμε δημιουργήσει σε HTML. Στη συνέχεια, ορίστε την τιμή της ιδιοκτησίας margin-right ως ' 50 εικονοστοιχεία ”:
ένα {περιθώριο-δεξιά : 50 εικονοστοιχεία ;
}
Ο χώρος δημιουργείται από τη δεξιά πλευρά του πρώτου συνδέσμου, τον οποίο μπορείτε να δείτε παρακάτω:
Βήμα 4: Δώστε χώρο ανάμεσα σε δύο συνδέσμους κάθετα
Για να δώσετε κάθετο χώρο μεταξύ δύο συνδέσμων, πρώτα ευθυγραμμίστε τους συνδέσμους σε κάθετη μορφή. Αυτό θα γίνει χρησιμοποιώντας το ' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ 'τιμή του ' απεικόνιση ' ιδιοκτησία και στη συνέχεια χρησιμοποιώντας το ' ύψος γραμμής ιδιότητα για να δώσει χώρο μεταξύ δύο γραμμών συνδέσμων.
Παράδειγμα:
Εδώ, θα ορίσουμε την τιμή της ιδιότητας εμφάνισης ως ' ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ” για να ευθυγραμμίσετε τους συνδέσμους κάθετα. Στη συνέχεια, δώστε το διάστημα μεταξύ δύο συνδέσμων ορίζοντας την τιμή της ιδιότητας line-height ως ' 80 εικονοστοιχεία ”:
ένα {απεικόνιση : ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ ;
ύψος γραμμής : 80 εικονοστοιχεία ;
}
Όπως μπορείτε να δείτε, ο χώρος δημιουργείται χρησιμοποιώντας την ιδιότητα line-height:
Αυτό είναι! Έχουμε εξηγήσει τη μέθοδο παροχής χώρου μεταξύ δύο συνδέσμων σε HTML & CSS.
συμπέρασμα
Ο ' », « περιθώριο-δεξιά ', και ' ύψος γραμμής Οι ιδιότητες του CSS χρησιμοποιούνται για να δώσουν οριζόντιο και κάθετο χώρο μεταξύ δύο συνδέσμων. Χρησιμοποιώντας αυτό, μπορείτε να προσαρμόσετε το χώρο από τη δεξιά και την αριστερή πλευρά των συνδέσμων. Σε αυτό το άρθρο, εξηγήσαμε τη διαδικασία για να δώσουμε χώρο μεταξύ δύο συνδέσεων χρησιμοποιώντας δύο διαφορετικές μεθόδους και παρέχουμε σχετικά παραδείγματα.