Muuta täyte ja välilyönnit CSS:ssä. Ylätäyte CSS: Jaa sisällön sijoittelun täytemarginaalit

Marginaalit ja täyte ovat erittäin tärkeitä tyylejä HTML-sivua rakennettaessa. Niiden avulla voit sijoittaa elementtejä tarkemmin, luoda kehyksen tarvittavilla rakoilla jne. Molemmat tyylit ovat hyvin samankaltaisia ​​ja suorittavat samanlaisia ​​​​toimintoja. Mutta eroja on silti.

Elementit voivat olla sisäkkäin tai vierekkäin. Katsotaanpa seuraavaa esimerkkiä:

Meillä on kaksi pöytää, sitruuna ja sininen, jotka sijaitsevat toistensa alla. Taulukot koostuvat yhdestä solusta. Ensimmäisessä taulukon solussa on punainen lohko. Katsotaanpa tämän esimerkin avulla, miten marginaalit ja sisennykset toimivat.

Kentät asetetaan tyylin mukaan pehmuste. Tämä tyyli koskee vain säilöelementtejä, jotka voivat sisältää muita elementtejä. Tyylin avulla voit asettaa marginaalin elementin reunojen ja sen sisällön välillä. Tyyli marginaali voit asettaa sisennykset elementistä toisen elementin lähimpään reunaan. Toisen elementin reunat voivat olla pääsäilön reunukset sekä itse sivun reunat.

On olemassa useita tapoja asettaa nämä tyylit. Määritä esimerkiksi suoraan kaikkien reunusten tai sisennysten koko yhdellä argumentilla jossakin mittayksikössä (px, ex, em, pt, cm ja niin edelleen):

marginaali: 3px;

täyte: 3px 5px;

ensimmäinen määrittää marginaalien/sisennysten määrän ylä- ja alaosassa, toinen - vasemmalla ja oikealla. Kun annetaan kolme argumenttia:

marginaali: 3px 5px 2px; ensimmäinen on marginaali/sisennys ylhäällä, toinen on sekä vasen että oikea, kolmas on alareunassa. Neljällä argumentilla:, täyte: 3px 5px 2px 6px;, marginaali: 3px 5px 2px 6px;, ensimmäinen on marginaali/välilyönti ylhäällä, toinen on oikealla, kolmas on alhaalla, neljäs on vasemmalla. Se on helppo muistaa: ensimmäinen on ylhäältä, sitten myötäpäivään. Lisäksi voit asettaa marginaalit ja pehmusteet tietylle reunalle erikseen käyttämällä sopivia tyylejä:, pehmuste-top, pehmuste-oikea, pehmuste-pohja, pehmuste-vasen marginaali yläosa

Kuvassa punainen lohko on taulukon solun sisällä ja sen reunojen vieressä, eli solulla ei ole marginaaleja. Asetetaan solun marginaalit tyylillä:

Tämän seurauksena sivu muuttuu seuraavaksi:

Katsotaanpa nyt syvennyksiä. Kaksi pöytää on vierekkäin, jos haluamme siirtää niitä hieman erilleen, voidaan käyttää sisennyksiä. Tässä on kaksi vaihtoehtoa: aseta joko ensimmäisen taulukon alas sisennys tai toisen taulukon yläsisennys. Käytetään toista:

Huomaa, että asetamme sisennyksen nimenomaan taulukkoon, emme taulukon soluun, kuten kenttien tapauksessa. Tässä tulos:

Muuten, ensimmäisessä tapauksessa (punaisen lohkon ja emosolun rajojen välinen rako) sama vaikutus voitaisiin saavuttaa asettamalla lohkon sisennykset. Yleensä, jos jokin on epäselvää, ilmoita meille kommenteissa.

Testisivun HTML-koodi:

Tervetuloa blogiini. Css (Cascading Style Sheets) tarjoaa paljon mukautusvaihtoehtoja ulkonäkö web-sivuja. Tänään haluan lyhyesti näyttää, kuinka CSS:ssä määritellään minkä tahansa elementin yläosassa tai toisella puolella oleva täyte.

Marginaali

Marginaali asetetaan marginaaliominaisuuden avulla. Sen avulla voit asettaa marginaalit kaikille neljälle sivulle kerralla tai käyttää muita ominaisuuksia: margin-top, margin-left, margin-right, margin-bottom, joiden avulla voit tehdä sen vain yhdelle puolelle.

Marginaali määrittää etäisyyden, jolla elementin valittu reuna siirtyy sivun muista elementeistä. Esimerkiksi merkintä:

P,div(
Marginaali yläreunassa: 20px;
}

Tämä tarkoittaa, että kaikki lohkot ja kappaleet sisennetään ylhäältä 20 pikselillä, eli niiden yläreuna siirtyy viereisistä elementeistä tällä etäisyydellä.

Marginaalit voidaan kirjoittaa kummallekin puolelle käyttämällä vain yhtä marginaaliominaisuutta, johon kirjoitetaan 4 arvoa peräkkäin:

Div(
Marginaali: 20px 10px 20px 10px;
}

Pehmusteet annetaan ylhäältä, oikealta, alareunasta ja vasemmasta reunasta. Koska tässä tapauksessa ne ovat yhtä suuret vastakkaisilla puolilla, voisimme kirjoittaa sen myös näin:

Div(
Marginaali: 20px 10px;
}

Ensimmäinen arvo on marginaali ylhäällä ja alhaalla, ja toinen on marginaali sivuilla.

Sisennys

Sisäpehmuste toimii eri tavalla - se ei siirrä lohkoa pois muista elementeistä, vaan lisää tilaa elementin sisällä siirtämällä lohkon sisällön pois sen reunoista. Se on kätevää. Missä olet nähnyt verkkosivuston, jossa teksti alkaa aivan ikkunan vasemmasta yläkulmasta?

En ole nähnyt tätä, koska verkkokehittäjät käyttävät aina ulkoisia ja sisäisiä sisennyksiä tehdäkseen tekstistä mahdollisimman helppolukuisen. Sisäinen täyttö määritetään täyteominaisuuden avulla, jossa voidaan listata kerralla 4 arvoa välilyönnillä erotettuna, vastaavasti kaikille reunoille.

Voit myös marginaalin tapaan lisätä sivun nimen ja asettaa etäisyyden vain sille. Esimerkiksi top padding voidaan kirjoittaa käyttämällä padding-top . Yleensä täyteominaisuus toimii täsmälleen samalla tavalla kuin marginaaliominaisuus.

Voit esimerkiksi antaa tämän koodinpätkän:

Lohko(
Leveys: 200 pikseliä;
Täyte: 20px;
}

Mikä sinun mielestäsi elementtimme todellinen leveys on? Tästä näet, että se on 200 pikseliä, mutta pehmusteet lisäävät vielä 20 kummallekin puolelle, yhteensä 240 pikseliä. Ota tämä huomioon suunnittelussa.

Haluaisin myös huomauttaa, että täyte annetaan yleensä vain lohkoelementeille, on parempi olla antamatta sitä rivielementeille. Marginaali toimii hyvin kaikkien elementtien kanssa.

Hei rakkaat blogisivuston lukijat! Tänään jatkamme Cascading Style Sheetsin tai CSS:n oppimista. Aiemmissa artikkeleissa olemme jo tarkastelleet yleisesti sivuston lohkoasettelua. Tämän seurauksena meillä alkoi olla melko ammattimaisia ​​verkkosivuja, mutta jotain niistä puuttui. Mutta niistä puuttuu todennäköisesti sisennykset ja kehykset. Tänään tarkastellaan marginaalin, täytön ja reunuksen tyylisääntöjä, joiden avulla voit asettaa sisennykset ja kehykset html-elementeille.

CSS-täyteasetukset

CSS-tyylisivujen avulla on mahdollista asettaa kahdenlaisia ​​sisennystyyppejä.

1.Sisennys on etäisyys elementin kuvitteellisesta rajasta sen sisältöön. Etäisyysarvo määritetään parametrilla pehmuste. Tämä sisennys kuuluu itse elementtiin ja sijaitsee sen sisällä.

2. Marginaali— Web-sivun nykyisen elementin reunan ja viereisten elementtien tai pääelementin reunojen välinen etäisyys. Etäisyyden koko on kiinteistön hallinnassa marginaali. Tämä sisennys sijaitsee elementin ulkopuolella.

Selvyyden vuoksi kuva:

Oletetaan esimerkiksi tekstillä täytetty solu. Tällöin täyte on solun kuvitteellisen reunan ja sen sisältämän tekstin välinen etäisyys. Ja ulkomarginaali on vierekkäisten solujen rajojen välinen etäisyys. Aloitetaan pehmuste.

Täyte CSS:ssä täyttöä käyttäen (ylä, ala, vasen, oikea)

Padding-left, padding-top, padding-right ja padding-bottom tyyliominaisuuksien avulla voit asettaa täyttöarvot vastaavasti verkkosivun elementin vasemmalle, ylä-, oikealle ja alareunalle:

pehmustepäällinen | täyte-oikea | pehmuste-pohja | täyte-vasen: arvo | korko | periä

Sisennysmäärä voidaan määrittää pikseleinä (px), prosentteina (%) tai muina CSS:lle hyväksyttävinä yksiköinä. Prosentteja määritettäessä arvo lasketaan elementin leveydestä. Periytysarvo osoittaa, että se on peritty vanhemmalta.

Esimerkiksi nykyiseen kappaleeseen käytin tyylisääntöä, joka asettaa vasemman täytön 20 pikseliin, yläosan 5 pikseliin, oikean täytön 35 pikseliin ja alaosan 10 pikseliin. Sääntömerkintä näyttää tältä:

p.test(
täyte-vasen: 20px;
täyte-top: 5px;
täyte-oikea: 35px;
pehmuste-ala: 10px
}

Komposiittityynysääntö voit määrittää sisennykset verkkosivuelementin kaikille puolille kerralla:

pehmuste:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Valmissääntö sallii yhden, kahden, kolmen tai neljän arvon käyttämisen välilyönnillä erotettuna. Tässä tapauksessa vaikutus riippuu arvojen määrästä:

• jos määrität yhden arvon, se asettaa sisennyksen määrän sivuelementin kaikille puolille;
• jos määrität kaksi arvoa, ensimmäinen asettaa sisennyksen määrän ylä- ja alaosaan, ja toinen - vasemmalle ja oikealle;
• jos määrität kolme arvoa, ensimmäinen määrittää sisennyksen määrän ylhäällä, toinen - vasemmalla ja oikealla ja kolmas - alaosassa;
• jos neljä arvoa on määritetty, ensimmäinen asettaa sisennyksen määrän ylhäällä, toinen oikealle, kolmas alareunalle ja neljäs vasemmalle.

Siten yllä olevaa CSS-sääntöä voidaan lyhentää niin paljon kuin mahdollista ja kirjoittaa seuraavasti:

p.test( täyttö: 5px 35px 10px 20px)

Marginaaliominaisuus tai marginaalit CSS:ssä

Marginaali-vasen, margin-top, margin-right ja margin-bottom -tyyliattribuuttien avulla voit asettaa marginaaliarvot, vasen, ylä, oikea ja alaosa:

margin-top | marginaali oikea | marginaali-ala | marginaali vasen:<значение>|auto|periä

Kuten edellä mainittiin, marginaali on etäisyys nykyisen elementin reunasta viereisen elementin reunaan tai, jos naapurielementtejä ei ole, pääsäiliön sisäreunaan.

Sisennysmäärä voidaan määrittää pikseleinä (px), prosentteina (%) tai muina CSS:lle sallittuina yksiköinä:

p(
marginaali vasen: 20px;
}
h1(
marginaali-oikea: 15%;
}

Arvo auto tarkoittaa, että selain laskee sisennyksen koon automaattisesti. Jos käytät prosenttilukua, sisennykset lasketaan riippuen ylätason säilön leveys. Lisäksi tämä ei koske vain marginaalia vasenta ja marginaalia oikeaa, vaan myös marginaalin ylä- ja alareunaa, prosenttimarginaalit lasketaan säiliön leveyden, ei korkeuden, mukaan.

On sallittua käyttää ulkoisten sisennysten arvoina negatiiviset arvot:

p(
margin-vasen: -20px;
}

Jos positiivisilla sisennysarvoilla vierekkäisiä elementtejä siirretään pois, niin negatiivisella arvolla naapurilohko törmää elementtiin, jolle olemme asettaneet tällaisen negatiivisen siirtymän.

Voimme myös määrittää täytön käyttämällä style-attribuuttia marginaali. Se asettaa sisennysarvot samanaikaisesti verkkosivuelementin kaikille puolille:

marginaali:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Kun määritetään yksi, kaksi, kolme tai neljä täytearvoa, tämä ominaisuus noudattaa samoja lakeja kuin täytesääntö.

Reunusasetukset Reunusominaisuuden avulla

Kehyksiä määritettäessä on olemassa kolmenlaisia ​​parametreja:

• border-width — reunan paksuus;
• border-color — reunan väri;
• border-style — viivan tyyppi, jolla kehys piirretään.

Aloitetaan kehyksen paksuusparametrilla:

border-width: [arvo | ohut | keskikokoinen | paksu] (1,4) | periä

Rungon paksuus voidaan määrittää pikseleinä tai muina CSS:ssä saatavilla olevina yksiköinä. Ohut, keskikokoinen ja paksu muuttujat asettavat reunuksen paksuudeksi 2, 4 ja 6 pikseliä:

border-width:medium;

Kuten täyttö- ja marginaaliominaisuuksien kohdalla, reunan leveysparametri sallii yhden, kaksi, kolme tai neljä arvoa, mikä asettaa reunuksen leveyden kaikille sivuille kerralla tai kullekin sivulle erikseen:

reunan leveys: 5px 3px 5px 3px

Aseta nykyisen kappaleen yläreunan paksuudesta 1 kuvapiste, oikealle 2 kuvapistettä, alareunaksi 3 kuvapistettä ja vasemmalle 4 kuvapistettä käyttämällä sääntöä (reunuksen leveys: 1 kuvapiste 2 kuvapistettä 3 kuvapistettä 4 kuvapistettä;)

Käyttämällä tyyliattribuutteja border-left-width, border-top-width, border-right-width ja border-bottom-width, voit asettaa reunuksen vasemman, ylä-, oikean- ja alapuolen paksuuden vastaavasti:

reunus-vasen-leveys|reunus-yläleveys|reunus-oikea-leveys|reunus-alaleveys: ohut|keskikokoinen|paksu|<толщина>|perintää

Seuraava parametri on border-color, jolla voit hallita kehyksen väri:

reunaväri: [väri | läpinäkyvä] (1,4) | periä

Ominaisuuden avulla voit asettaa reunuksen värin elementin kaikille puolille kerralla tai vain määritetyille sivuille. Arvona voit käyttää menetelmiä, joilla määritetään HTML:ssä hyväksytyt värit: heksadesimaalikoodi, avainsanat jne.:

p (reunuksen leveys: 2px; reunuksen väri: punainen)

läpinäkyvä asettaa läpinäkyvän reunuksen värin ja perii emoarvon arvon. Oletusarvoisesti, jos reunan väriä ei ole määritetty, käytetään sitä, jota käytetään annetun elementin fontille.

Käyttämällä tyyliattribuutteja border-left-color, border-top-color, border-right-color ja border-bottom-color, voit määrittää reunuksen vasemman, ylä-, oikean- ja alareunan värit vastaavasti:

reuna-vasen-väri|reunuksen-yläväri|reunuksen-oikea-väri|reunuksen-ala-väri: läpinäkyvä|<цвет>|perintää

JA viimeinen parametri border-tyyli määrittää kehyksen tyyppi:

reunatyyli: (1,4) | periä

Kehystyyppi voidaan määrittää elementin kaikille sivuille kerralla tai vain määritetyille sivuille. Voit käyttää arvoina useita avainsanoja. Ulkonäkö riippuu käytetystä selaimesta ja kehyksen paksuudesta. Merkitys ei yhtään on oletuksena käytössä, eikä se näytä kehystä ja sen paksuus on nolla. Piilotetulla arvolla on sama vaikutus. Saatu kehys muille arvoille paksuudesta riippuen näkyy alla olevassa taulukossa:

Tyyliattribuutit border-left-style, border-top-style, border-right-style ja border-bottom-style määrittävät viivojen tyylin, jotka piirretään kehyksen vasemmalle, ylä-, oikealle ja alapuolelle, vastaavasti:

reunus-vasen-tyyli|reunus-ylä-tyyli|reunus-oikea-tyyli|reunus-ala-tyyli: ei mitään|piilotettu|pisteinen|katkoviiva|kiinteä|kaksoisuurre|harjanne|inset|alusta|peritty

Kuten pehmusteissa ja pehmusteissa, niitä on yleinen rajaomaisuus. Sen avulla voit samanaikaisesti asettaa elementin ympärillä olevan reunuksen paksuuden, tyylin ja värin:

reuna: | periä

Arvot voivat olla missä tahansa järjestyksessä välilyönnillä erotettuina:

td (reuna: 1px kiinteä keltainen)

Jos haluat asettaa reunuksen vain tietyille elementin sivuille, on ominaisuudet border-top, border-bottom, border-left, border-right, joiden avulla voit asettaa parametreja ylä-, ala-, vasen- ja oikea puoli puitteet

Jäljelle jää vain yhteenveto:

• tehtävää varten pehmuste käytämme kiinteistöä pehmuste;
• määrittääksesi marginaalit on sääntö marginaali;
• kehyksen parametrit määritetään attribuutilla rajaa.

Huomaan, että kaikki nämä css-ominaisuudet kasvattaa web-sivuelementin kokoa. Siksi, jos muutamme verkkosivun suunnittelun muodostavien lohkosäiliöiden reunuksen paksuutta tai pehmusteen kokoa, meidän on muutettava näiden säiliöiden kokoa vastaavasti, muuten ne voivat liikkua ja muotoilu rikki.

Siinä kaikki, nähdään ensi kerralla!

Tänään puhumme sinulle hieman asettelun periaatteista, nimittäin tavoista järjestää sisennykset sivustollasi tietyille elementeille.

Kyseinen elementti, joka on sisennettävä, voi olla tekstiä, kuva, taulukko tai mikä tahansa muu HTML-elementti. Tärkeintä on noudattaa joitain tärkeitä sääntöjä, joista kerron sinulle nyt.

Jos olet juuri luomassa sivustoasi, suosittelen, että lisäät seuraavat ominaisuudet päätyylitiedoston yläosaan:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:before, *:after ( -webkit-box-sizing: border- box-box-sizing: border-box;

Miksi tämä on välttämätöntä, kysyt? Vastaan ​​kysymykseesi selkeällä esimerkillä.

Oletetaan, että sinulla on tällainen asetteluelementti:

Tältä vaihtoehto näyttää ilman yllä kuvattuja ominaisuuksia (yläelementti) ja niiden käyttöä (alaelementti):

Mitä täällä voi nähdä? Että elementin leveydestä ensimmäisessä versiossa (ilman ominaisuuksia) tuli ilmoitettua suurempi lisättyjen sisennysten vuoksi, mikä ei ole asettelun kannalta täysin kätevää ja oikeaa.

Vaihtoehto ominaisuuksilla on paljon esteettisempi, mutta sitä kannattaa käyttää tietoisesti, sillä kun lisäät ne valmiille sivustolle, vaarana on huono muotoilu ja "päänsärky" kaiken saamisesta oikeaan muotoon. . Kaikki projektit, joita minulla oli mahdollisuus johtaa tyhjästä, eivät olleet ilman näitä ominaisuuksia.

Ja nyt itse asiassa puhutaan vaihtoehdoista, joilla voit järjestää sivustosi elementtien sisennykset visuaalisten esimerkkien avulla.

Täyte CSS:n "täyte"-ominaisuuden avulla

Jotta ymmärrät asioiden koko logiikan, otetaan esimerkkinä seuraava asettelun fragmentti:

omilla tyyleilläsi:

Test_div (leveys: 250 kuvapistettä; reunus: 1px kiinteä; )

Visuaalinen versio näyttää tältä:

Mikä on omaisuus" pehmuste"? Se auttaa järjestämään määritettyjen elementtien sisäisen sisennyksen. Lisätään asetteluihimme 10 pikselin sisäinen täyte:

Test_div (leveys: 250px; reunus: 1px kiinteä; täyte: 10px; // täyttö 10px)

Visuaalisesti se näyttää tältä:

Ominaisuuden numero 10 tarkoittaa, että määritettyjen elementtien sisälle, jokaiselle niiden neljälle sivulle, on lisättävä 10 kuvapisteen marginaali. Pikselit (px) voidaan korvata prosenteilla tai muilla CSS-tuetuilla arvoilla.

Vaihtoehtoja on kaksi merkinnät sivuista, joilta sisennykset on tehtävä.

Ensimmäinen- tässä on selkeä maininta osapuolista:

Täyte: 10px; // 10px ylätäyttö-oikea: 10px; // 10px täyte oikealla täyttö-alhaalla: 10px; // Sisäinen täyte 10px alhaalta täyte-vasemmalla: 10px; // 10px vasen täyte

Tässä tapauksessa kumpikin osapuoli käyttää omaa omaisuuttaan. JA toinen:

Täyte: 10px 0 0 0; // Sisäinen täyte 10px päällä, kaikki muu - 0px täyte: 10px 0; // Sisäinen täyte 10px ylä- ja alareunassa ja sivuilla - 0px pehmuste: 0 10px; // Sisäinen pehmuste 0px ylä- ja alareunassa ja 10px sivuilla

Tässä on yksinkertainen luettelo arvoista, joista jokainen vastaa omaa puoltaan. Sivut on asetettu näin: ensimmäinen arvo on ylhäällä, toinen on oikea, kolmas on alhainen ja neljäs on vasen, eli kaikki on myötäpäivään.

Jos arvoja on kaksi (ylä ja oikea), tämä tarkoittaa, että peilissä samat arvot menevät alas ja vasemmalle, ja se on ainoa tapa. Kaikki näyttää olevan selvää. Jos sinun ei tarvitse asettaa sisennystä yhdelle sivulle, aseta tämän puolen arvoksi "0". Pidän tästä vaihtoehdosta enemmän, koska se on kompaktimpi, mutta yrityksissäni käytin ensimmäistä vaihtoehtoa.

Tämäntyyppinen sisennys sopii erinomaisesti tekstin, taulukon solujen sisällön jne. erottamiseen. tekstitietoa. Itse elementtien erottamiseksi, kuten yllä olevassa esimerkissä, on toinen ominaisuus.

Marginaali käyttämällä CSS-ominaisuutta "margin"

Kiinteistön erottuva piirre" marginaali" tarkoittaa, että sisennys lisätään elementin ulkopuolelle, eli ulkoiseen.

Tässä on myös kaksi lisäysvaihtoehtoa.

Ensimmäinen– jossa nimenomaisesti mainitaan osapuoli:

Marginaali yläreuna: 10px; // 10px marginaali yläreunassa-oikealla: 10px; // 10px marginaali oikeanpuoleisessa marginaalissa-alhaalla: 10px; // Ulkomarginaali 10px alhaalta marginaali-vasemmalta: 10px; // 10px vasen marginaali

Toinen– arvoluettelolla, joista jokainen vastaa omaa puoltaan:

Marginaali: 10px 0 0 0; // Ulkomarginaali 10px päällä, kaikki muu - 0px marginaali: 10px 0; // Marginaali 10px ylhäällä ja alhaalla ja sivuilla - 0px marginaali: 0 10px; // Ulkopehmuste 0px ylä- ja alareunassa ja 10px sivuilla

En kuvaile tässä kaikkia sääntöjen kanssa työskentelyn vivahteita, kaikki on sama kuin omaisuudessa " pehmuste", kirjoitettu hänestä yllä.

Käytämme marginaalia seuraavalla arvolla:

Test_div (leveys: 250px; reunus: 1px kiinteä; marginaali: 10px; // Marginaali 10px)

Visuaalisesti se näyttää tältä:

Kuten esimerkistä voidaan nähdä, tässä tapauksessa ulkoinen marginaali lisätään määritettyjen elementtien erottamiseksi.

Tärkeä ominaisuus: Jos tarkastelit tulosta, olet saattanut huomata, että vierekkäiset elementtien sisennykset eivät täsmää. Eli jos ensimmäisen elementin alamarginaali on 10 pikseliä ja toisen elementin ylämarginaali on sama arvo, myös niiden välinen kokonaisetäisyys on 10 kuvapistettä. Jos 10 ja 15, niin kokonaissumma on 15 ja niin edelleen.

Tätä sisennysvaihtoehtoa käytetään usein tekstissä, nimittäin kappaleiden suunnittelussa, sekä elementeissä, joissa on näkyvät reunat.

Mutta molemmat ominaisuudet eivät rajoitu vain näihin elementteihin. Valitset itse niiden käyttövaihtoehdot, yritin vain antaa sinulle perusasiat niistä.

CSS-asettelu on aina ollut suorakaiteen muotoinen. Kaikki sileät linjat ovat kehittäjän toimivaltaa. Tyylisäännöt tarjoavat riittävästi vaihtoehtoja antaakseen sivulle tasaisen muodon näytön resoluution rajoissa. Mutta mikä tahansa asetteluelementti on aina suorakulmio, jossa tietojen järjestelyä säätelevät CSS-säännöt.

Kaikkien sivujen täyttö on tärkeää jokaiselle sivuelementille, kun se on ehdottomasti sijoitettu, ja CSS-yläpehmuste on määritelty erityisesti, koska sillä on merkitystä eri elementeille, erityisesti upotetuille.

Perusasetuksen säännöt

Lohkoelementillä on sääntö sisennykselle sen sisältämän elementin sivuilta (marginaali), sääntö sen sisällä olevien elementtien sisennykseen (täyttö) ja reunan leveys (reunus), jota voidaan myös käyttää.

Yläosassa oleva sisennys on erityisen tärkeä. Lohkon CSS liittää täytesäännöt sääntöihin absoluuttisesti ja suhteellisesti sijoitetuille elementeille kyseisessä lohkossa.

Yleinen käytäntö CSS-säännöille: voit määrittää saman pehmusteen kaikille sivuille, pareittain ylhäältä/alhaalta ja oikealta/vasemmalta tai jokaiselle puolelle erikseen. Esimerkiksi,

• marginaali: 10px;
• täyte: 10px20px;
• täyte: 10px20px30px40px.

Ensimmäisessä tapauksessa elementin sisennys ulkosäiliön, jossa se sijaitsee, sivuilta on asetettu. Toisessa tapauksessa marginaalit ylä- ja alaosassa ovat 10 kuvapistettä, vasemmalla ja oikealla - 20 kuvapistettä. Kolmannessa tapauksessa sisennysten koko ilmoitetaan kaikilla puolilla: ylhäällä, oikealla, alhaalla ja vasemmalla.

Kaikissa näissä tapauksissa sisennys ylempi CSS on 10 pikseliä.

Säännöt, jotka muuttavat elementtien sijaintia

Jos asetteluelementtiä ei ole sijoitettu absoluuttisesti, se sijoitetaan yleiseen sivunmuodostusjärjestykseen.

Jos määrittelemme täyttö CSS:n päälle scCurrInfo-elementissä, tavoite saavutetaan, mutta jos li-tasolla, niin ei.

Tässä esimerkissä täytesääntöä käyttäen: 40px; edellyttää riittävää leveys- ja korkeussääntöjen pienentämistä 80 pikselillä. IN muuten scCurrInfo-lohkon koko ylittää ulomman lohkon rajat.

Jos poistamme täytesäännön scCurrInfo-kuvauksesta, mutta lisäämme sen arvolla 20px listakohteen tyylikuvaukseen, saamme vain ylempi luetelmakohta. CSS ei käytä tätä arvoa muihin osapuoliin.

Luonnollisesti tämä sisennyssäännön käyttö koskee jokaista li-elementtiä.

Yleiset sisällön muotoilukäytännöt

Jotkut kehittäjät saavuttavat täydellisyyden asettamalla sivuja käyttämällä lohkoelementtejä. Ilmeisesti tämä on klassinen käytäntö - aloittaa taulukoista ja päättää oma koulutusprosessisi lohkoilla.

Lohkojen asettelun luontainen vapaus on kiehtovaa, eikä kehittäjän mielikuvitusta välttämättä rajoita tiukat taulukkosäännöt: vain rivit, vain solut, yhdistäminen vain vaaka- ja pystysuunnassa. Ei mitään erityistä suhteellisille ideoille.

Samaan aikaan taulukoilla on ilmeisten haittojen lisäksi monia laadullisia etuja. Yläreunaa luodessaan CSS ottaa huomioon vasemman ja oikean täytön (ala on erityinen hetki). Taulukon solusääntöjen avulla voit hallita sekä pysty- että vaakasuuntaista tasausta. Käyttämällä rivityylejä ja yhdistämällä niitä solutyylien kanssa voit luoda monimutkaisia ​​näkymiä sisällöstä.

Sivun tavanomainen esitys suorakulmioiden muodossa ei estä lainkaan sen esittämistä taulukon muodossa. Nämä ovat myös suorakulmioita, mutta ne ovat myös taulukkosoluja, eli niillä on omat säännöt, jotka täydentävät lohkojen sääntöjä.

Absoluuttinen asemointi

Estä säännöllä POSITION: absoluuttinen ; sijaitsee paikassa, jonka sen koordinaatit määräävät suhteessa lohkoon, jossa se sijaitsee.

CSS-sääntöjen ominainen piirre on, että "harjoittelu on paras totuuden kriteeri" useimmissa tapauksissa, varsinkin kun vaaditaan selainyhteensopivuutta ja asettelu tehdään manuaalisesti, on parempi tutkia täysimittaisia ​​​​käsikirjoja peräkkäisillä tyylisivuilla.

Taulukoiden käyttö johtaa usein solun sisällön siirtoongelmiin. Samanlainen siirtymä lohkon sisällä ei aina vaikuta kaikkiin elementteihin. Kokeilemalla voit saavuttaa halutun tuloksen. Triviaali tehtävä: miten yläpehmusteen poistaminen ei aina ole triviaali ratkaisu CSS:lle.

Joissakin tapauksissa, kun joudut asettelemaan sivuelementtejä jonkin suositun verkkosivuston sisällönhallintajärjestelmän sisälle, sinun on silti kiinnitettävä huomiota paitsi kokeelliseen käytäntöön myös tarkastella kollegojesi kokemuksia.