Tapa, jolla selaimet käsittelivät tyhjää tilaa, ei ole aluksi kovin intuitiivinen, varsinkin jos verrataan, kuinka Hypertext Markup Language käsittelee tyhjää tilaa tekstinkäsittelyohjelmiin verrattuna. Tekstinkäsittely-ohjelmistossa voit lisätä paljon välilyöntejä tai välilehtiä asiakirjaan, ja tämä väli näkyy asiakirjan sisällön näytössä. Tämä WYSIWYG-muotoilu ei koske HTML-koodia tai verkkosivuja.
Välit tulostuksessa
Tekstinkäsittelyohjelmistossa kolme ensisijaista välilyöntiä ovat tilaa, välilehtija vaunun paluu. Jokainen näistä merkeistä toimii erillisellä tavalla, mutta HTML-selaimissa selaimet tekevät niistä kaikki olennaisesti samanlaiset. Sijoitatko yhden tai 100 välilyöntiä HTML-merkintä tai sekoita välilyönti sarkaimiin ja kuljetuspalautuksiin, kaikki nämä tiivistyvät yhteen tilaan, kun sivu renderöi sivun. selain. Verkkosuunnittelun terminologiassa tämä tunnetaan nimellä tyhjä tila romahtaa. Et voi käyttää näitä tyypillisiä välinäppäimiä lisäämään välilyöntiä verkkosivulle, koska selain romahtaa toistetut välilyönnit vain yhteen tilaan, kun ne renderoidaan selaimessa,
CSS: n avulla HTML-välilehtien ja välien luominen
Nykyään verkkosivustot on rakennettu erillään rakenteesta ja tyylistä. Sivun rakennetta hoitaa HTML, kun taas tyylin sanelee CSS-tyylitaulukot. Jos haluat luoda välin tai saavuttaa tietyn asettelun, käänny CSS: n sijasta sen sijaan, että lisäät välilyöntejä HTML-koodiin.
Jos yrität käyttää välilehdet Jos haluat luoda tekstisarakkeita, käytä sen sijaan
Jos asettamasi tiedot ovat taulukkotietoja, tasaa tiedot haluamallasi tavalla taulukoiden avulla. Pöydät saavat usein huonoa räppiä verkkosuunnittelussa, koska niitä käytettiin väärin puhtaina asettelutyökaluina niin monen vuoden ajan, mutta taulukot ovat edelleen täysin kelvollisia, jos sisältösi sisältää aidosti taulukkotietoja.
Marginaalit, täyte ja teksti-sisennys
Yleisimpiä tapoja luoda väli CSS: llä on käyttää jotain seuraavista CSS-tyyleistä:
- marginaali
- pehmuste
- teksti-luetelmakohta
Esimerkiksi sisennä kappaleen ensimmäinen rivi, kuten välilehti, jolla on seuraava CSS (huomaa, että tässä oletetaan, että kappaleeseen on liitetty luokan attribuutti "ensimmäinen"):
s. ensimmäinen {
teksti-luetelmakohta: 5em;
}
Tässä kappaleessa luetellaan noin viisi merkkiä.
Käytä marginaalia tai täyteominaisuuksia CSS lisätä välilyöntiä elementin ylä-, ala-, vasemmalle tai oikealle (tai näiden sivujen yhdistelmille). Saavuta mikä tahansa tarvittava etäisyys kääntymällä CSS: n puoleen.
Tekstin siirtäminen useammalle kuin yhdelle tilalle ilman CSS: ää
Jos haluat vain siirtää tekstisi useamman kuin yhden välimatkan päässä edellisestä kohdasta, käytä tilaa, joka ei ole katkeamatonta.
Voit käyttää rikkomatonta tilaa lisäämällä niin monta kertaa kuin tarvitset sitä HTML-merkinnässä.
HTML kunnioittaa näitä murtumattomia välilyöntejä eikä kutista niitä yhdeksi tilaksi. Tätä lähestymistapaa pidetään kuitenkin huonona käytäntönä, koska se lisää ylimääräistä HTML-merkintää asiakirjaan vain asettamistarpeiden saavuttamiseksi. Vältä lisäämättä murtumattomia välilyöntejä yksinkertaisesti halutun asetteluvaikutuksen ja käytön saavuttamiseksi CSS-marginaalit ja pehmusteet sen sijaan.