Sisennykset ja marginaalit html:ssä. Kuinka tehdä kaunis tekstikenttä. Mahdolliset marginaali- ja täytearvot

Marginaalien ja täytön järjestäminen CSS:ssä

• Netcracker blogi,
• CSS
• HTML

Tässä artikkelissa haluan kertoa sinulle, kuinka sijoittaa oikein kentät(täyte) ja sisennys(marginaali) CSS:ssä.

Ensinnäkin, muistetaan W3C-spesifikaatioiden mukaiset marginaalit ja pehmusteet. Laatikkomallissa marginaalit ovat sisällön ja laatikon reunan välinen etäisyys. Ja täyte on etäisyys lohkon reunan ja viereisen tai pääelementin reunan välillä.

Eli jos elementin reunaa ja taustaa ei ole määritetty, eroa ei ole, käytä täyte- tai marginaaliominaisuutta sisennysten asettamiseen, mutta edellyttäen, että elementin leveyttä (leveyttä) ja korkeutta (korkeutta) ei ole määritetty ja algoritmi sisältökokojen laskemiseksi laatikon koon ominaisuuksien avulla.

Muista joka tapauksessa, että marginaalit voivat olla tai olla sisällyttämättä elementin leveyteen tai korkeuteen. Sisennykset asetetaan aina elementin ulkopuolelle.

Katsotaanpa nyt, kuinka marginaalit ja tila elementtien väliin asetetaan oikein. Otetaan esimerkkinä seuraava lohko.

Tämä on uutislohko. Se koostuu otsikosta, uutisluettelosta ja "Muut uutiset" -linkistä. Annetaan heille seuraavat luokkien nimet: news__title, news__list ja news__more-link.

Koska jokaisella näistä elementeistä on samat vasen ja oikea marginaalit, on parempi asettaa marginaalit päälohkolle sen sijaan, että määrität vasen ja oikea marginaali jokaiselle elementille erikseen.

Uutiset ( täyttö: 20px 25px;)

Näin ollen, jos sinun on muutettava oikealla ja vasemmalla olevien kenttien arvoa, tämä on tehtävä Yhdessä paikassa. Ja kun lisäät uuden elementin uutislohkoon, siinä on jo tarvittavat sisennykset vasemmalla ja oikealla.

Usein käy niin, että kaikilla lohkon elementeillä on sama pehmuste vasemmalla ja oikealla, paitsi yhdellä, jossa ei esimerkiksi taustan vuoksi pitäisi olla pehmustetta ollenkaan. Tässä tapauksessa voit asettaa elementille negatiivisen täytön. Tällöin sinun ei tarvitse poistaa kenttiä lohkon sisällä muita elementtejä varten.

Nyt sinun on asetettava pystyreunukset elementtien väliin. Tätä varten sinun on määritettävä, mikä elementeistä on pakollinen. Ilmeisesti uutisblokki ei voi olla olemassa ilman uutislistaa, siinä ei välttämättä ole "Muut uutiset" -linkkiä, vaikka otsikko voidaan poistaa esimerkiksi ulkoasua muuttaessa.

Tämän huomioon ottaen asetamme otsikon alareunaan sisennyksen ja "Muut uutiset" -linkin yläosaan sisennyksen.

News__title ( margin-ala: 10px; ) .news__more-link ( margin-top: 12px; )

Voisimme saavuttaa saman ulkoisen tuloksen lisäämällä uutislistan ylä- ja alaosaan täyte.

Uutiset__lista ( marginaali: 10px 0 12px 0; )

Nyt sinun on asetettava sisennykset yksittäisten uutisten väliin. Huomaa jälleen, että uutisten määrä voi vaihdella ja luettelossa voi olla vain yksi uutinen.

Voit asettaa yläsisennyksen jokaiselle uutiselle paitsi ensimmäiselle, tai alimman sisennyksen jokaiselle uutiselle paitsi viimeiselle. Ensimmäinen vaihtoehto on parempi, koska:first-child pseudovalitsin lisättiin CSS 2.1 -spesifikaatioon ja sillä on laajempi tuki, toisin kuin:last-child pseudovalitsija, joka lisättiin vain CSS 3.0 -spesifikaatioon.

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

Siten reunusten ja sisennysten oikealla sijoittelulla voit joustavasti muuttaa minkä tahansa lohkon ulkonäköä muuttamatta tyylejä ja häiritsemättä suunnittelua. Tärkeintä on määrittää, mitkä lohkoelementit ovat tärkeimmät ( pakollinen), ja mitkä valinnainen.

Joskus emme voi luottaa vaadittuihin elementteihin. Meillä on esimerkiksi ponnahdusikkuna, jonka sisällä voidaan näyttää otsikkoa ja tekstiä. Lisäksi joissain tapauksissa tekstiä ei ehkä ole, ja joissain tapauksissa otsikkoa ei voi olla. Eli molemmat elementit ovat valinnaisia.

Tässä tapauksessa voit käyttää seuraavaa menetelmää sisennysten asettamiseen.

Popup__header + .popup__text ( margin-top: 15px; )

Tällöin sisennys näkyy vain, jos molemmat elementit ovat käytössä. Jos näytetään vain otsikko tai vain teksti, ylimääräistä sisennystä ei tehdä.

Kutistavat pystyreunukset

Toinen vivahde, josta kaikki eivät tiedä, liittyy pystysuoraan tilaan vierekkäisten lohkojen välillä. Yllä antamani sisennyksen määritelmä sanoo, että sisennys on välinen etäisyys rajoja nykyiset ja naapurikorttelit. Jos siis asetamme kaksi lohkoa toistensa alle ja annamme yhdelle alamarginaaliksi 30px ja toiselle ylämarginaaliksi 20px, niiden välinen marginaali ei ole 50px, vaan 30px.

Toisin sanoen sisennykset menevät päällekkäin, ja lohkojen välinen sisennys on yhtä suuri kuin suurin sisennys, ei sisennysten summa. Tätä vaikutusta kutsutaan myös "lupaukseksi".

Huomaa, että vaakasuorat sisennykset, toisin kuin pystysuorat, eivät "kutistu", vaan ne lasketaan yhteen. Myös kentät (täyte) summataan.

Tietäen sisennysten "romahtamisesta", voimme käyttää tätä ominaisuutta hyödyksemme. Jos esimerkiksi meidän on sisennettävä otsikot ja teksti artikkelin sisällä, asetamme ensimmäisen tason otsikon alimmalle sisennykselle 20 pikseliä ja toisen tason otsikolle yläsisennys on 20 kuvapistettä ja alaosan 10 kuvapistettä. kaikki kappaleet asetamme ylimmän luetelmakohdan arvoon 10 pikseliä.

H1 ( marginaali alaosa: 24 kuvapistettä; ) h2 ( marginaali yläosa: 24 kuvapistettä; marginaali alaosa: 12 kuvapistettä; ) p ( marginaali yläosa: 12 kuvapistettä; )

Nyt h2-otsikko voidaan sijoittaa joko h1-otsikon tai kappaleen jälkeen. Joka tapauksessa ylämarginaali ei ylitä 24 kuvapistettä.

Yleiset säännöt

Yhteenvetona haluaisin luetella säännöt, joita noudatan reunusten ja sisennysten järjestämisessä.

1. Jos vierekkäisillä elementeillä on sama täyttö, on parempi asettaa ne pääsäiliöön elementtien sijaan.
2. Kun asetat sisennykset elementtien väliin, sinun tulee harkita, onko elementti pakollinen vai valinnainen.
3. Muista, että samankaltaisten elementtien luetteloa varten elementtien määrä voi vaihdella.
4. Ole tietoinen pystysuorasta pehmusteesta ja käytä tätä ominaisuutta siellä, missä se hyödyttää sinua.

CSS tarjoaa web-kehittäjälle valtavia mahdollisuuksia HTML-sivujen suunnitteluun. Aloittelijalle ne näyttävät monimutkaisilta, mutta jos ymmärrät ne huolellisesti ja järjestelmällisesti, tyylilehtitekniikka valloitetaan, eikä verkkosivujen ulkoasu enää aiheuta vaikeuksia. Yksi CSS:n korvaamattomista ominaisuuksista - pehmuste. Sitä käytetään HTML-sivujen lohkojen kenttien asettamiseen.

Mitä ovat lohkot?

Sivusto on rakennettu tiilistä - lohkoista. Lisäksi jokaisen elementin sisällöstä riippumatta on oltava suorakaiteen muotoinen. Toisin sanoen kehittäjä sulkee kaikki kuvat ja kirjoitukset henkisesti "laatikoihin", jotka järjestävät hän luo verkkosivun.

Useimmiten lohkot määritetään tunnisteilla

,

-

,

. CSS-ominaisuuksia sovelletaan jokaiseen tällaiseen elementtiin: pehmuste, marginaali, rajaa, leveys ja muut. Suorakaidelohkon leveys määräytyy ominaisuuden mukaan leveys, jokainen elementti on koristeltu kentillä, jotka on rajattu attribuutilla rajaa. Lopuksi sivukomponentissa voi olla ulkoiset marginaalit tai täyte - marginaali, erottaen sen toisesta lohkosta.

CSS-täyteominaisuuden syntaksi

Cascading Style Sheets -tyylisivujen luojat ovat tarjonneet useita vaihtoehtoja määritteen kirjoittamiseen asetettuihin kenttiin. On kahdeksan eri tapaa luoda tyhjä alue lohkon sisään! Alla olevassa taulukossa on esimerkkejä kustakin vaihtoehdosta ja lyhyt selitys niistä.

Käyttöesimerkki	Selitys
pehmuste: 15px;	Jos määritteen perässä on yksi numero, tämä tarkoittaa, että elementillä on samat marginaalit kaikilla sivuilla. Ennätys px olettaa, että arvo on määritetty pikseleinä. Eli lohkossa on lopulta 15 pikselin kenttiä.
pehmuste: 18px 36px;	Ensimmäinen kahdesta numerosta osoittaa, että pystymarginaalit ovat 18 pikseliä, sivumarginaalit ovat kaksi kertaa suuremmat - 36 pikseliä.
pehmuste: 6px 12px 18px;	Keskimmäinen numero on sivujen (vasen ja oikea) marginaalien arvo, kaksi muuta ovat pystyreunuksia. Tässä tapauksessa ensimmäinen numero (6 px) viittaa ylämarginaaliin ja viimeinen (18 px) alareunaan.
täyte: 6 px 12 px 18 px 36 px;	CSS-omaisuuden tietuelomake pehmuste, joka sisältää neljä numeroa, mahdollistaa marginaalien asettamisen lohkon kaikille puolille. Numeeriset arvot lisätään peräkkäin ylämarginaaliin ja sitten myötäpäivään oikealle, alas ja vasemmalle.
täyte-vasen: 14 px;	Jälkikirjoitus vasemmalle puhuu puolestaan ​​- marginaali asetetaan vain elementin vasemmalle puolelle.
täyte-oikea: 14 px;	Kuten edellinen tallennusvaihtoehto - kenttä luodaan vain lohkon oikealle puolelle.
täyte-yläosa: 14 px;	Merkintä määrittää yläreunassa olevan kentän.
täyte-ala: 14 px;	Merkintä määrittää alla olevan kentän.

On huomattava, että CSS:n oletustäyte on nolla. Tämä attribuutti ei ole peritty, eli se on asetettava jokaiselle lohkolle. Tavallisten ja ymmärrettävien pikselien lisäksi lohkojen ympärillä olevan tyhjän tilan leveys määritellään myös suhteellisissa yksiköissä. Esimerkiksi yllä olevissa esimerkeissä voit kirjoittaa 5% - seurauksena selain laskee kentän leveyden automaattisesti.

Kuinka käyttää omaisuutta?

Olemme siis käsitelleet attribuutin kirjoittamisen lomakkeet, mutta kuinka sitä käytetään HTML-sivulla? Ensimmäinen vaihtoehto on "kaunimpi", kun kaikkea CSS-tekniikkaan liittyvää ei kirjoiteta HTML-kielellä, vaan se sijoitetaan erilliseen tiedostoon sopivalla tunnisteella.

Toinen vaihtoehto on kirjoittaa suoraan tunnisteeseen<tyyli>. CSS pehmuste tässä tapauksessa se määritellään seuraavasti:

< divstyle="pehmuste: 22px">

Asettelusuunnittelija valitsee, kuinka määrite kirjoitetaan. Joka tapauksessa sinun on tiedettävä kaikki tavat käyttää ominaisuutta kenttien määrittämiseen, jotta voit käyttää sitä tarvittaessa.

Ajoittain törmään tekstikenttiin, jotka ovat tarpeeksi epätavallisia tehdäkseen yhteisiä piirteitä HTML ja CSS ei näytä mahdolliselta. Siellä on käyriä, gradientteja, varjoja ja muita graafisia kelloja ja pillejä. Ja tässä artikkelissa kerron sinulle, kuinka tehdä kaunis tekstikenttä HTML-sivulle, jossa on kaikki nämä graafiset kellot ja pillit.

Ensinnäkin sinun on tehtävä 3 kuvat tekstikentästä:

1. Vasen kulma. Sen tulee koskettaa aivan tekstikentän alkua (esimerkiksi sen varjoa) vasemmalla ja jatkua siihen hetkeen asti, jolloin pyöristystä ei enää ole.
2. Oikea kulma. Samanlainen kuin vasen kulma, mutta toisella puolella.
3. Vartalonauha. Tämän nauhan tulee olla leveä 1 pikseli ja se tulee leikata jonnekin tekstikentän keskeltä.

Erittäin tärkeä seikka on se kaikkien kolmen kuvan on oltava saman korkeita. Seuraava vaihe on HTML-koodi:

Kuten näette, teimme pöydän 1. rivi ja 3 saraketta. Ensimmäisessä sarakkeessa suunnittelemme vasemman kulman, toisessa - itse tekstikentän, kolmannessa - oikean kulman.

Ja nyt CSS-koodi:

Input_left(
tausta: url("input_left.jpg") no-repeat scroll 0 0 läpinäkyvä; //Tausta vasemmalla kulmalla
}
.input_right(
tausta: url("input_right.jpg") no-repeat scroll 0 0 läpinäkyvä; //Tausta oikealla kulmalla
}
input(
tausta: url("bg_input.jpg") repeat-x scroll 0 0 läpinäkyvä; //Tekstikentän tausta
reuna: ei mitään; //Poista vakiokehys tekstikentästä
korkeus: 35px; //Kuvan korkeus
ääriviivat: ei mitään; //Poista tarkennuskehys IE:stä
leveys: 200px; //Tekstikentän pakollinen leveys
}

Jos teit kaiken oikein, nyt voit ihailla kaunista tekstikenttää sivullasi. Käytännössä tätä menetelmää käytetään jatkuvasti (ei vain tekstikentille), joten jokaisen taittosuunnittelijan on tiedettävä se.

Pehmuste-top

Toivottavasti olet jo tutustunut lohkon rakenteeseen. Jos ei, se esitetään alla.

Lohkon rakenne

Niin. Tiedät luultavasti jo, että lohkon marginaalit ja sisennykset esitetään täyte- ja marginaaliominaisuuksilla, vastaavasti. Ja edellisessä artikkelissa olemme jo osittain koskettaneet tätä aihetta. Tällä sivulla tarkastellaan tarkemmin kenttiä ( pehmuste) ja pehmuste ( marginaali ).

Marginaali- ja täyteominaisuudet ovat hyvin samankaltaisia ​​toistensa kanssa ja suorittavat samanlaisia ​​toimintoja, minkä vuoksi ne sekoitetaan usein. Mutta tietenkään sinun ei pitäisi tehdä tätä, koska marginaalit ja sisennykset ovat täysin eri asioita. Tämä näkyy kuitenkin selvästi kuvasta, koska se ei ole sattumaa, että se näkyy tässä.

Niin. Marginaalit määritetään täyteominaisuuden mukaan. Nämä ovat sisäiset etäisyydet lohkon rajoista sen sisältöön.

Ominaisuus koskee kaikkia elementtejä.

Etäisyys määritetään CSS-pituusyksiköissä, % tai ( oletuksena

Täyteominaisuus on universaali, koska se asettaa marginaalit elementin reunoista sen sisältöön kaikille sen sivuille ja yhdistää siten ominaisuudet padding-top , padding-right , padding-bottom ja padding-left , jotka määrittävät elementin leveyden. marginaalit jokaiselle sivuelementille erikseen.

Sisennykset asetetaan marginaaliominaisuuden avulla, joka määrittää etäisyyden lohkon rajoista lähimpiin elementteihin tai selainikkunan reunoihin.

Marginaaliominaisuus koskee myös kaikkia elementtejä.

Täyte määritetään myös CSS-pituusyksiköissä, % tai ( oletuksena) selain havaitsee automaattisesti.

Marginaaliominaisuus on universaali, koska se määrittää sisennyksen määrän elementin reunoista kaikille sen sivuille, jolloin yhdistyvät ominaisuudet margin-top , margin-right , margin-bottom ja margin-left , jotka asettavat sisennysten leveyden. kunkin elementin reunoista erikseen .

Ja vielä yksi asia: sisennykset ( marginaali) sijaitsevat lohkon ulkopuolella, kun taas marginaalit ( pehmuste) sen sisällä, joten lohkon tausta tai sen taustakuva koskee vain marginaaleja ja sisennykset ovat aina läpinäkyviä tai niissä on pää ( vanhempien) lohko tai sivun tausta.

Koodinpätkä:

; ">	Pöytä sijaitsee säiliön sisällä, jossa on punainen reuna ja sininen tausta. Täytön leveys taulukon reunasta säilön punaiseen reunaan on 10 pikseliä. Vasemmalla oleva solu sisältää kuvan. Reunukset kuvan ja solun reunojen välillä ovat 25 pikseliä. Oikean solun marginaali on 10 pikseliä!

Edellisessä luvussa mainittiin CSS-ominaisuudet, kuten marginaali ja täyte. Nyt tarkastelemme niitä yksityiskohtaisemmin ja pohdimme, kuinka ne eroavat toisistaan ​​ja mitä ominaisuuksia niillä on.

Elementtien väliin voi luoda välilyöntejä tavalla tai toisella, mutta jos täyte on sisennys sisällöstä lohkon reunaan, niin marginaali on etäisyys lohkosta toiseen, lohkoväli. Kuvakaappaus näyttää selkeän esimerkin:

Täyte erottaa sisällön lohkon reunuksesta ja marginaali luo aukkoja lohkojen väliin

Kuten näet, CSS-marginaalit ja täyte eroavat toisistaan, vaikka joskus ilman koodia on mahdotonta määrittää, mitä ominaisuutta käytetään etäisyyden asettamiseen. Tämä tapahtuu, kun sisältölohkon kehys tai tausta puuttuu.

Seuraavat ominaisuudet ovat olemassa marginaalin tai täytön asettamiseen CSS:ssä elementin kummallekin puolelle:

Täyte:

• pehmustepäällinen: merkitys;
• täyte-oikea: merkitys;
• pehmuste-ala: merkitys;
• täyte-vasen: merkitys;

Kentät:

• marginaali yläosa: merkitys;
• marginaali-oikea: merkitys;
• marginaali-ala: merkitys;
• marginaali vasen: merkitys;

Arvot voidaan määrittää missä tahansa CSS-yksikössä - px, em, % jne. Esimerkki: margin-top: 15px .

On myös erittäin kätevä asia, kuten lyhenne marginaalille ja täytettävälle CSS:lle. Jos sinun on asetettava marginaalit tai täyttö elementin kaikille neljälle puolelle, sinun ei välttämättä tarvitse kirjoittaa ominaisuutta jokaiselle sivulle erikseen. Kaikki on tehty yksinkertaisemmiksi: marginaalille ja täytteelle voit määrittää 1, 2, 3 tai 4 arvoa kerralla. Arvojen määrä määrittää, kuinka asetukset jakautuvat:

• 4 arvoa: täyttö asetetaan elementin kaikille sivuille seuraavassa järjestyksessä: ylhäältä, oikealta, alapuolelta, vasen: täyte: 2px 4px 5px 10px;
• 3 arvoa: täyttö asetetaan ensin yläpuolelle, sitten samanaikaisesti vasemmalle ja oikealle ja sitten alapuolelle: täyte: 3px 6px 9px;
• 2 arvoa: täyttö asetetaan ensin samanaikaisesti ylä- ja alapuolelta ja sitten samanaikaisesti vasemmalle ja oikealle: täyte: 6px 12px;
• 1-arvo: elementin kaikille sivuille on asetettu yhtäläinen täyttö: täyte: 3px;

Samat säännöt koskevat CSS-marginaaliominaisuutta. Huomaa, että voit myös käyttää negatiivisia arvoja marginaalille (esimerkiksi -3px), mikä voi joskus olla varsin hyödyllistä.

Tiivistä marginaali

Kuvittele tilanne: kaksi lohkoelementtiä sijaitsevat päällekkäin ja niille on annettu marginaalikentät. Ylälohko on asetettu marginaaliin: 60px ja alalohko on asetettu marginaaliin: 30px . Olisi loogista olettaa, että kahden elementin kaksi rajakenttää yksinkertaisesti koskettavat toisiaan ja tämän seurauksena lohkojen välinen rako on 90 pikseliä.

Asiat ovat kuitenkin toisin. Itse asiassa tällaisessa tilanteessa syntyy efekti, jota kutsutaan romahdukseksi, kun kahdesta vierekkäisestä elementtikentästä valitaan kooltaan suurin. Esimerkissämme elementtien välinen lopullinen rako on 60 pikseliä.

Lohkojen välinen etäisyys on yhtä suuri kuin suurempi arvoista

Tiivistysmarginaali toimii vain elementtien ylä- ja alamarginaaleille, eikä se koske oikean ja vasemman puolen reunuksia. Lopullinen aukkoarvo lasketaan eri tavalla eri tilanteissa:

• Kun molemmat marginaaliarvot ovat positiivisia, tuloksena oleva marginaalikoko on yhtä suuri kuin suurempi arvo.
• Jos jokin arvoista on negatiivinen, kentän koon laskemiseksi sinun on saatava arvojen summa. Esimerkiksi arvoilla 20px ja -18px kentän koko on:
  20 + (-18) = 20 - 18 = 2 pikseliä.
• Jos molemmat arvot ovat negatiivisia, näiden lukujen moduuleja verrataan ja valitaan luku, jolla on suurempi moduuli (siis pienempi negatiivisista luvuista). Esimerkki: sinun on verrattava -6px- ja -8px-kenttien arvoja. Vertailtavien lukujen moduulit ovat 6 ja 8, vastaavasti. Tästä seuraa, että 6-8. Tuloksena oleva kentän koko on -8 pikseliä.
• Jos arvot on määritelty eri CSS-yksiköissä, ne muunnetaan yhdeksi, minkä jälkeen niitä verrataan ja valitaan suurempi arvo.
• Lapsielementtien marginaalikoko määritetään vielä mielenkiintoisemmalla tavalla: jos lapsella on suurempi marginaali kuin vanhemmalla, se on etusijalla. Tässä tapauksessa vanhemman ylä- ja alamarginaalien koot ovat samat kuin lapselle määritellyt. Tässä tapauksessa vanhemman ja lapsen välillä ei ole etäisyyttä.