Ostatnio edytowany:

column-gap

Autor: Virtual Patriot

Opis właściwości column-gap

Za pomocą właściwości column-gap możemy określić rozmiar odległości pomiędzy kolejnymi kolumnami, na które została podzielona treść interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości column-gap

przeznaczenie

element HTML, którego treść może oraz została podzielona na kolumny

pozycja

dowolna

dziedziczenie

nie

wartość initial

normal

wyjątki initial

brak

animowanie

tak, lecz tylko wartość rozmiar

Interpretacja właściwości column-gap

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości column-gap

normal

Opis

Wartość normal jest domyślną wartością właściwości column-gap.

Domyślnie rozmiar odległości pomiędzy kolejnymi kolumnami, na które została podzielona treść elementu HTML określany jest automatycznie przez przeglądarkę internetową.

Przykład

  column-gap:normal;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Rozmiar odległości pomiędzy kolejnymi kolumnami, na które została podzielona treść przykładowego elementu "div" został określony automatycznie przez przeglądarkę internetową.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        column-width:200px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

rozmiar

Opis

Za pomocą właściwości column-gap oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną możemy określić rozmiar odległości pomiędzy kolejnymi kolumnami, na które została podzielona treść interesującego nas elementu HTML.

Przykład

  column-gap:50px;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Rozmiar odległości pomiędzy kolejnymi kolumnami, na które została podzielona treść przykładowego elementu "div" wynosi 50 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "column-gap" wraz z wartością "50px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        column-width:200px;
        column-gap:50px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych, ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>