Ιδιότητα column-rule

Η ιδιότητα column-rule ορίζει ένα περιθώριο μεταξύ των στηλών σε κείμενο πολλαπλών στηλών. Όσον αφορά τις τιμές που δέχεται, συμπίπτει με την ιδιότητα border.

Παράδειγμα . Τύπος solid

Σε αυτό το παράδειγμα, το κείμενο θα χωριστεί σε 3 στήλες με περιθώρια μεταξύ των στηλών σε μορφή συμπαγής γραμμής πάχους 1px (η απόσταση μεταξύ των στηλών θα σχηματιστεί αυτόματα, καθώς έχει οριστεί column-gap στην τιμή normal):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

Παράδειγμα . Επίδραση του column-gap

Σε αυτό το παράδειγμα, το κείμενο θα χωριστεί σε 3 στήλες με κενό μεταξύ τους 50px. Το περιθώριο θα περάσει από τη μέση του κενού (δεξιά και αριστερά από το περιθώριο θα υπάρχουν 25px):

html<div id="elem">
  some long text
</div>

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Δείτε επίσης