e-Learning Education

Html tags – Μείωση της απόστασης μεταξύ p tag και ol tag

HTML Tags – p tag – ol tag

html distance o olΚαλώς ορίσατε στο πρώτο άρθρο σχετικά με τα html tags. Αυτό το άρθρο αναφέρεται στον συνδυασμό χρήσης μεταξύ του p tag, για την παράγραφο, και του ol tag που χρησιμοποιείται για να δηλώσει μια λίστα.

 Όταν γράφουμε μια παράγραφο σε έναν html editor, η παράγραφος αυτή περικλείεται μεταξύ των tags <p> και </p>. Το tag p, όπως και κάθε tag το οποίο έχει ετικέτα ανοίγματος και κλεισίματος, ορίζουν ένα κουτί, block. Το p tag ορίζει συνήθως ένα κουτί κειμένου. Μετά και πριν από την παράγραφο υπάρχει ένα κενό. Το κείμενο το οποίο ακολουθεί μετά την παράγραφο έχει ένα διάστημα μισού εκατοστού ή 20 pixels και το οποίο διάστημα είναι προκαθορισμένο.

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

hmtl p tag - html ol tag

Ο κώδικας για αυτή την απλή λίστα είναι ο ακόλουθος:

Θέλοντας λοιπόν να μειώσω την απόσταση από την επικεφαλίδα-παράγραφο και την λίστα, χρησιμοποίησα, για την παράγραφο, p tag, ένα inline css rule με τον οποίον μείωσα το περιθώριο της παραγράφου στο 0. Επιπλέον στο ol tag της λίστας, έβαλα ακόμα ένα inline css rule με τον οποίον έθεσα το άνω περιθώριο της λίστας όσο ήθελα, δηλαδή 5 pixels.

Έτσι λοιπόν, ο κώδικας μεταβλήθηκε ως εξής:

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

hmtl p tag - html ol tag