Tunniste lisää pehmusteen yläreunan keskelle. Muuta täyte ja välilyönnit CSS:ssä

Kotiin / Mobiililaitteet

Hei! Aluksi halusin jakaa tämän artikkelin 4 pieneen osaan, mutta sitten ajattelin sitä. Mitä varten? Loppujen lopuksi on mukavampaa, kun tällaiset tiedot kerätään yhden materiaalin sisällä.

Joten tänään opimme kuinka tehdä CSS-sisennys vasemmalla ja kaikilla muilla puolilla - oikealla, ylä- ja alapuolella. Niitä voidaan tehdä kuville ja teksteille. Niitä on kahta tyyppiä:

Ulkoinen;
Sisäinen.

Edellisen tärkein ominaisuus on marginaali, jälkimmäiselle pehmuste. Selvyyden vuoksi tein sinulle pienen esimerkin. Jotta sisäisen ja ulkoisen tilan erottaminen olisi visuaalisesti kätevää, lisäsin näkyvän taulukon. Katsotaan mitä tapahtui?

Marginaalit

Kirjoittamalla ne CSS-tyylitiedostoon voit asettaa tietolohkon suunnan sivulla. Siirrän sitä esimerkiksi vasemmalle ja alas. Haluan heti näyttää, miltä se näyttää.

Yleensä voit käyttää seuraavia vaihtoehtoja sisennysten asettamiseen.

Vasen (marginaali-vasen).

Oikealla (marginaali-oikea).

Yläosa (marginaali-yläosa).

Pohja (marginaali-ala).

Nyt näytän sinulle toisen hienon vivahteen.

Kuten näet, voit käyttää yhtä vaihtoehdoista - vaikutus on sama. Vain toisessa tapauksessa koodi osoittautuu kompaktimmaksi. Huomaa myös, että sisennykset asetetaan myötäpäivään. Kaikki alkaa ylhäältä ja päättyy vasemmalle.

Pehmuste

Menettely on samanlainen täällä. Vasta nyt lisään uusia ominaisuuksia en koko taulukkoon, vaan sarakkeiden sisältöön.

Katsotaan mitä siitä tuli.

Analogisesti CSS:n sisäisten marginaalien kanssa, ulkoiset voidaan kirjoittaa lyhennetyllä koodilla tai sivuille erikseen.

Nämä olivat pääkohdat. Lopuksi näytän sinulle, kuinka voit muuten helpottaa työtä.

Sisennys valitulla tunnistetasolla

Yllä esitetyissä tapauksissa ne on asetettu tekstille ja kuville samanaikaisesti. Itse asiassa voit asettaa etäisyyden elementteihin tietyn tunnisteen tasolla. Näytän sinulle kuinka se toimii. Kumoan viimeiset muutokset ja määritän erikoiskoodin tyylitiedostoon.

Katsotaanpa, mitä tapahtui muutosten tallentamisen jälkeen.

Kuva pysyi paikallaan, vain tekstin sisällä oleva teksti siirtyi vasemmalle. Samanlaisia manipulaatioita voidaan soveltaa muihin lohkoihin, esimerkiksi tr, span.

Kuten lisätietoja Suosittelen lukemaan tehtävää koskevan julkaisun. Niitä on myös kuvattu riittävästi mielenkiintoisia tapoja. Voi olla hyödyllinen punaisen viivan muodostamisessa tekstissä tai muiden toimien suorittamisessa.

Lisäksi voit tilata ilmaisen uutiskirjeen osoitteessa sähköpostiosoitteet. Blogin tilaamiseen on erityinen lomake. Nähdään myöhemmin.

Käyttäjät arvioivat verkkoresurssin sen visuaalisen houkuttelevuuden perusteella. Siksi edes tiedollisesti hyödyllistä tekstiä ei välttämättä lueta, koska se on huonosti suunniteltu. Johtopäätös - sinun on lähestyttävä huolellisesti ja tarkkaavaisesti paitsi sivuston sivujen semanttista sisältöä, myös sen visuaalista esitystapaa. CSS-teknologian tulo on laajentanut mahdollisuuksia luoda houkuttelevia artikkeleita. Yksi ominaisuuksista, jotka on suunniteltu helpottamaan kirjoittamista, on CSS-tekstin sisennys.

Marginaalit ja täyte: mitä eroa niillä on?

Ennen kuin aloitat tekstin muotoilun, sinun tulee ymmärtää, mitä marginaalit ja sisennykset ovat. Huolimatta siitä, että nämä merkintäelementit näyttävät joissain tapauksissa käyttäjän silmissä samalta, niiden välillä on perustavanlaatuisia eroja:

kenttä on ominaisuuden määrittelemä pehmuste, sisennys - marginaali;
marginaali määräytyy sisällön ja lohkon reunan välisen raon perusteella, sisennys - viereisten lohkojen rajojen välillä;
marginaalit voidaan ottaa huomioon tai olla ottamatta huomioon elementin mitoissa (leveys ja korkeus).

marginaali omaisuutta

Joten aseta CSS-tekstin vaaka- tai pystysisennys käyttämällä konstruktia marginaali. Tämä ominaisuus koskee tunnistetta asiakirjan kappaleen määrittely. Hyvin yksinkertainen tapaus se on kirjoitettu näin:

marginaali: 12px.

Tämä rivi tarkoittaa, että tekstilohkon (tai minkä tahansa muun lohkon) ympärillä on 12 pikselin sisennys joka puolella. Voit lisätä väliä esimerkiksi kolme kertaa kirjoittamalla:

marginaali: 36px.

Mutta entä jos lohkojen välisen välin pitäisi olla erilainen kummallakin puolella? Verkkosivujen kehittäjät käyttävät useita tallennustapoja:

marginaali: 11px 22px.
marginaali: 11px 22px 33px.
marginaali: 11px 22px 33px 44px.

Ensimmäisessä esimerkissä 11 pikseliä sisennetään lohkon ala- ja yläreunoista ja 22 pikseliä lohkon sivuille. Toisen tallennusmuodon mukaan lohkon yläreunan ja sisällön väliin tulee 11 pikseliä, alareunan väliin 33 pikseliä ja sivuilla 22 pikseliä. Kolmannessa tapauksessa täyte on 11 pikseliä ylhäällä, 22 pikseliä oikealla, 33 pikseliä alhaalla ja 44 pikseliä vasemmalla.

On myös mahdollista tallentaa etäisyys lohkon rajaan vain yhdelle puolelle: margin-top, margin-bottom, margin-vasen, margin-right. Kääntämällä kiinteistöjen nimet venäjäksi on helppo arvata niiden tarkoitus. Esimerkiksi seuraava merkintä sanoo, että oikeanpuoleinen marginaali on 22 pikseliä:

marginaali oikea: 22px.

Muilla puolilla etäisyyksien lohkon ympärillä oletetaan olevan yhtä suuri kuin pääelementin arvo.

Omaisuus marginaali on ominaisuus, joka kehittäjän on pidettävä mielessä CSS-tekstin pystysisennystä käyttäessään. Intervallit viereisiä elementtejä niitä ei tiivistetä, vaan ne asetetaan päällekkäin. Anna esimerkiksi yhden lohkon olla marginaali-ala: 15px, ja sen vieressä oleva lohko alla marginaali yläreuna: 35 kuvapistettä. Koulun aritmetiikka ja maalaisjärki viittaavat siihen, että niiden välinen kokonaistila on 50 pikseliä. Käytännössä näin ei ole. Kortti, jolla on korkea kiinteistöarvo marginaali"imee" naapurinsa. Tämän seurauksena elementtien välinen etäisyys on 35 pikseliä.

"Punainen" viiva

Dokumentin laatiminen sisään tekstieditori, käyttäjät haluavat määrittää jokaisen uuden kappaleen käyttämällä "punaista" riviä. KANSSA käyttämällä CSS:ää vasemmalla olevan tekstin sisennys on helppo tehdä - rakennetta käytetään tekstin sisennys. Se on kirjoitettu näin:

tekstin sisennys: 11px.

Eli kappaleen ensimmäistä riviä siirretään 11 pikselillä suhteessa vasempaan reunaan. Jos haluat tehdä verkkosivun tekstistä enemmän kuin dokumentti editorissa, sinun tulee lisäksi asettaa, eli kirjoittaa:

tekstin sisennys: 11px;

tekstin tasaus: tasaa.

Pikselien lisäksi merkintöjä kuvattaessa on sallittua käyttää muita yksiköitä - tuumaa, pisteitä, prosentteja. Olkoon lohkon CSS-tekstitäyttö 10 %. Kun lohkon leveys on 500 pikseliä, punainen viiva on 50 pikseliä (10 % 500:sta).

Tämä ominaisuus voidaan määrittää periä. Tämä merkintä sanoo, että lohko käyttää samanlaista emolohkon ominaisuutta.

tekstin sisennys: periy.

Yllättäen se voi ottaa myös negatiivisia arvoja! Tällöin muodostuu niin sanotut ylitykset, eli pääteksti pysyy paikallaan ja ensimmäinen rivi siirtyy vasemmalle 22 pikseliä:

tekstin sisennys: -22px.

Jotta kirjaimet eivät menisi selaimen vasemman reunan ulkopuolelle, lisäksi tekstin sisennys sinun on käytettävä rakennetta kentän asettamiseen:

täyte-vasen: 22px.

CSS:n tärkeimmät ominaisuudet käydään läpi. Ja harjoittelu auttaa vahvistamaan niitä. Tässä on viimeisiä vinkkejä oppimiesi tietojen soveltamiseen verkkosivustosi kehittämiseen:

punainen viiva ja tekstin sisennys ovat eri käsitteitä, ja niiden ilmaisemiseen käytetään erilaisia ominaisuuksia;
Pystysuorassa sisennyksessä matematiikan sääntöjä ei sovelleta - välit menevät päällekkäin, elementti, jolla on suurempi arvo, "voittaa";
negatiivinen kappaleen sisennys käytetään osoittamaan kappaleen ensimmäinen rivi kuvan avulla.

Tapahtuu, että kun luot elementtiä tai asettelua, meidän on luotava vaakasuora sisennys niin, että se on suhteessa toisiinsa. Tämä voi olla lohkoina tai erilaisina elementteinä, tai pikemminkin sen tarkoituksena on tehdä etäisyys niin, että se on alun perin määritelty vaakasuorassa olevien lohkojen välillä. On eri tavoilla suunnitteluelementtien sisennysten luomisesta. Kuitenkin yhteensopivuuden vuoksi useiden kanssa nykyaikaiset selaimet Tässä kosketamme nykyistä sisennyksen aihetta tekstinä tai lohkona sivulla.

Ominaisuus määrittää, kuinka paljon vaakasuuntaista tekstitilaa tulee rivittää ennen tekstielementin ensimmäisen rivin alkua. Etäisyys lasketaan elementin aloitusreunasta ja lohkotason säiliöstä.

Koska suuri osa verkkosivun sisällöstä on tekstin muodossa, kyky muotoilla tekstiä houkuttelevalla ja tehokkaalla tavalla on tärkeä taito verkkosuunnittelijaksi ryhtyessä. Kuvauksen ja kappaleen sisennystä varten yleisimmin käytetty ja suositeltu menetelmä olisi käyttämällä CSS:ää. Täällä sinua tarjotaan erilaisia esimerkkejä kuinka CSS:ää voidaan käyttää tekstille ja sisennyselementille.

Aseta ylämarginaali CSS:n avulla

Sisennysten luomiseen käytetään, sitten tietysti ilman CSS-ominaisuudet emme voi tehdä sitä, koska tarvitsemme marginaalin, tämä on arvo, joka voidaan asettaa eri tavoilla, kuten px ja tavallisesti pikseleinä, em, % ja niin edelleen, että kaikki tapahtuu CSS-tyyliin yksiköissä mittaus.

Käyttöesimerkki:

Margin-block(
marginaali yläosa: 50px;
}

Mitä näet kuvassa:

Voit käyttää sitä myös lohkojen pudotukseen, tässä voit käyttää ominaisuutta nimeltä marginaali vasen Myös marginaali-oikea Ja marginaali-ala. Jos osoitamme yksinkertaisesti marginaaliominaisuuden, jossa sille on mahdollista aluksi asettaa 4 parametria, tässä tarkastellaan myötäpäivään käsitettä varten, jossa aloitamme yläpuolelta jatketaan kunkin sivun alla.

marginaali: 20px 50px 30px 50px;

Näin se toimii marginaali: ylhäällä oikea alhaalla vasen:

CSS:ssä on myös yläpehmuste

Sattuu niin, että joudut kohdistamaan sisältöelementin pystysuoraan, tämä on suhteessa päälohkoon, tässä on mahdollista käyttää muita ominaisuuksia, kuten padding-top, joka tekee, tai pikemminkin asettaa sisäisen täytön oletuksena ylöspäin. Jos puhumme samankaltaisista ominaisuuksista, jotka voidaan myös kirjoittaa ja asettaa analogisella tavalla, tässä on marginaali px, em, % ja muissa yksiköissä.

Esimerkki:

Padding-block(
pehmuste-yläosa: 47px;
}

Katsotaanpa esimerkkiä:

Nyt voimme harkita kiinteistön analogia marginaali Ja pehmuste, jota käytetään sisennysten asettamiseen lohkoelementin toisille puolille, mutta menee jo erikseen: pehmuste-vasen, pehmuste-oikea, pehmuste-pohja. Missä voit heti asettaa tarvitsemasi etäisyyden, vain kaikille puolille, ja kaikki on samaan aikaan.

täyte: 10px 20px 40px 50px;

Täällä voit aluksi asettaa arvon kuten marginaali alkaen kuten ymmärrät ylhäältä, mutta sitten kaikki menee myötäpäivään, tämä on oikealla, alhaalla, vasemmalla ja niin edelleen.

Nyt riippuen erilaisia tilanteita, sinulla on mahdollisuus sisentää yläosa päälle CSS-tyylejä, jossa käytämme ominaisuuksia marginaali Ja pehmuste että on mahdollista sijoittaa tarvittavat elementit Internet-resurssi sivulle, kuten tarkoitit ja sinun on tehtävä.

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.

Lohkoasettelua käytetään usein luotaessa verkkosivustoa tai blogia. Tämän seurauksena on usein tarpeen sisentää lohkoja. Tästä syystä noin kuinka sisentää CSS:ssä kuvataan yksityiskohtaisesti tässä oppitunnissa. Selaimelle jokainen tagi on säilö, jossa on sisältö, täyte, ulkoreunat ja reunus. Tällä oppitunnilla opimme tekemään sisäisiä ja ulkoisia sisennyksiä ja harkitsemaan niiden pääparametreja.

Alla oleva kuva näyttää selvästi lohkon sisennyksen parametrit:

Kuten näet, sisennykset voidaan tehdä neljään suuntaan: ylempi sisennys (ylhäällä), alasisennys (alhaalla), vasen sisennys (vasen) ja oikea sisennys (oikea). Mittayksiköt voivat olla pikseleitä, prosentteja ja muita CSS-yksiköitä – lue niistä lisää. Tämä opetusohjelma käyttää pikseleitä.

Block pehmuste

CSS:n täytteestä vastaava omaisuus on pehmuste. Katsotaanpa siis esimerkkiä lohkon sisäisen täytön asettamisesta:

pehmuste-top: 5px; /*yläpehmuste*/ pehmuste-vasen: 8px; /*vasen täyte*/ täyttö-oikea: 8px; /*oikea täyte*/ pehmuste-ala: 5px; /*alapehmuste*/

Tässä esimerkissä pehmusteet asetetaan erikseen lohkon kummallekin puolelle. Lisäksi on useita tapoja asettaa sisennys CSS:ssä:

marginaali: 5px 8px 5px 8px; /*ylä-, oikea-, ala-, vasen marginaali*/ marginaali: 5px 8px 5px; /*kuvaa ylä-, vasen-, oikea- ja alamarginaalit*/ marginaali: 5px 8px; /*kuvaa ylä- ja alareunaa, oikeaa ja vasenta marginaalia*/ marginaali: 7px; /*kuvaa kaikkia sisäisiä täytteitä 7px*/

Ensimmäinen ja viimeinen menetelmä on helpompi muistaa. Ensimmäisessä tapauksessa sisennykset sijoitetaan myötäpäivään (ylä, oikea, alhainen, vasen) - voimme määrittää minkä tahansa sisennyksen määrän, jälkimmäisessä tapauksessa sisennykset ovat samat.

Estä marginaalit

CSS:n marginaaleista vastaava omaisuus on marginaali. Esimerkkejä CSS:n marginaaleista:

marginaali yläreuna: 5px; /*ylämarginaali*/ marginaali-vasen: 10px; /*vasen marginaali*/ marginaali-oikea: 10px; /*oikea marginaali*/ marginaali-ala: 5px; /*alamarginaali*/

täyte: 5px 10px 5px 10px; /*ylä-, oikea-, ala-, vasen marginaali*/ täyte: 5px 10px 5px; /*kuvailee ylä-, vasenta ja oikeaa, alareunaa*/ täyte: 5px 10px; /*kuvailee ylä- ja alaosaa, oikeaa ja vasenta täytetystä*/ täyte: 7px; /*kuvaa kaikki 7px:n marginaalit*/

Siten, kuinka sisentää CSS:ssä- kysymys ei ole vaikea, mutta erittäin tärkeä. Ymmärtääksesi paremmin yllä kuvattuja tietoja, sinun tulee muistaa, että on olemassa kaksi ominaisuutta: täyte - sisäiset sisennykset ja marginaali - ulkoiset sisennykset. Lisäksi, kuten jo tiedät, sisennysten asettamiseen on useita tapoja, joita voit käyttää.