HTML Tags – p tag – ol tag
Καλώς ορίσατε στο πρώτο άρθρο σχετικά με τα html tags. Αυτό το άρθρο αναφέρεται στον συνδυασμό χρήσης μεταξύ του p tag, για την παράγραφο, και του ol tag που χρησιμοποιείται για να δηλώσει μια λίστα.
Όταν γράφουμε μια παράγραφο σε έναν html editor, η παράγραφος αυτή περικλείεται μεταξύ των tags <p> και </p>. Το tag p, όπως και κάθε tag το οποίο έχει ετικέτα ανοίγματος και κλεισίματος, ορίζουν ένα κουτί, block. Το p tag ορίζει συνήθως ένα κουτί κειμένου. Μετά και πριν από την παράγραφο υπάρχει ένα κενό. Το κείμενο το οποίο ακολουθεί μετά την παράγραφο έχει ένα διάστημα μισού εκατοστού ή 20 pixels και το οποίο διάστημα είναι προκαθορισμένο.
Πρόσφατα, αντιμετώπισα ένα τέτοιο θέμα. Είχα μια παράγραφο μιας γραμμής και μια λίστα η οποία ακολουθούσε. Στην παρακάτω εικόνα προβάλλεται η παράγραφος με την λίστα. Παρατηρήστε την απόσταση της λίστας από την παράγραφο.
Ο κώδικας για αυτή την απλή λίστα είναι ο ακόλουθος:
<p><strong>Ποιά από τις ακόλουθες μάρκες αυτοκινήτων σας αρέσει</strong></p> <ol > <li>Mercedes</li> <li>WV</li> <li>Volvo</li> <li>Alfa Romeo</li> <li>Peugeot</li> </ol>
Θέλοντας λοιπόν να μειώσω την απόσταση από την επικεφαλίδα-παράγραφο και την λίστα, χρησιμοποίησα, για την παράγραφο, p tag, ένα inline css rule με τον οποίον μείωσα το περιθώριο της παραγράφου στο 0. Επιπλέον στο ol tag της λίστας, έβαλα ακόμα ένα inline css rule με τον οποίον έθεσα το άνω περιθώριο της λίστας όσο ήθελα, δηλαδή 5 pixels.
Έτσι λοιπόν, ο κώδικας μεταβλήθηκε ως εξής:
<p style="margin:0;"><strong>Ποιά απο τις ακόλουθες μάρκες αυτοκινήτων σας αρέσει</strong></p> <ol style="margin-top:5px;"> <li>Mercedes</li> <li>WV</li> <li>Volvo</li> <li>Alfa Romeo</li> <li>Peugeot</li> </ol>
Η παρακάτω εικόνα δείχνει το αποτέλεσμα του παραπάνω κώδικα. Η λίστα απέχει πολύ λίγο από την προηγούμενη παράγραφο.
