CSS border-spacing ominaisuus

Määrittely ja käyttö

border-spacing-ominaisuus asettaa vierekkäisten solujen reunaviivojen välinen etäisyyden (ainoastaan "erillinen reunaviiva"-tilassa).

Huomautus:Tietyt versiot IE-selaimista eivät tue tätä ominaisuutta.

Selitys

Tämä ominaisuus määrittää solujen reunaviivojen välistä etäisyyden erillisen reunaviivamallin yhteydessä. Määritetyissä kahdessa pituusarvossa ensimmäinen on horisontaalinen etäisyys ja toinen on vertikaalinen etäisyys. Tämä ominaisuus sivuutetaan, ellei border-collapse aseteta erilliseksi. Vaikka ominaisuus sovelletaan vain taulukkoihin, se voidaan perittää kaikilta taulukon elementeiltä.

Lisäksi tarkastele:

CSS-opetusohjelma:CSS taulukot

HTML DOM -viittausoppikirja:borderSpacing-ominaisuus

Esimerkki

Aseta taulukon border-spacing:

table
  {
  border-collapse:separate;
  border-spacing:10px 50px;
  }

Kokeile itse

CSS-kieli

border-spacing: length|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
length length

Määritellään vierekkäisten solujen reunaviivojen välinen etäisyys. Käytä px, cm jne. yksikköjä. Negatiivisia arvoja ei sallita.

Jos määritellään yksi length Määrittelyyn liittyvät parametrit, niin ne määrittelevät sekä horisontaalisen että vertikaalisen etäisyyden.

Jos määritellään kaksi length Määrittelyyn liittyvät parametrit, niin ensimmäinen asettaa horisontaalisen etäisyyden, ja toinen asettaa vertikaalisen etäisyyden.
inherit Määritellään, että border-spacing-ominaisuuden arvo tulisi perittää vanhemmalta elementiltä.

Tekninen yksityiskohta

Oletusarvo: ei määritelty
Perinnäisyys: kyllä
Versio: CSS2
JavaScript-kieli: object.style.borderSpacing="15px"

Lisää esimerkkejä

Aseta taulukon reunaviivojen välinen tila
Tämä esimerkki näyttää, kuinka voit asettaa solujen reunaviivojen välistä etäisyyden.

Selaimeen tuettu

Chrome IE / Edge Firefox Safari Opera
1.0 8.0 1.0 1.0 4.0