Mitä eroa on pehmusteella ja marginaalilla. Pehmuste ja reuna - sisäinen pehmuste ja kehykset. Mikä on plusmerkin tehtävä?

19 vastausta

TL; DR: Käytän oletusarvoisesti marginaalia kaikkialla paitsi silloin, kun minulla on reunus tai tausta ja haluan lisätä tilaa näkyvän marginaalin sisällä.

Minulle eniten iso ero täytteen ja marginaalin välissä on se pystyreunat pakataan automaattisesti, mutta täyte ei.

Tarkastellaan kahta elementtiä, toistensa yläpuolella, joissa kummassakin on 1em sisennys. Tätä sisennystä pidetään osana elementtiä ja se säilyy aina.

Saat siis ensimmäisen elementin sisällön, jota seuraa ensimmäisen elementin täyttö, sitten toisen elementin täyte ja sitten toisen elementin sisältö.

Joten näiden kahden elementin sisältö on lopulta 2em x 2 elementtiä.

Korvaa nyt tämä pehmuste 1em marginaalilla. Marginaalien katsotaan olevan elementin rajojen ulkopuolella, ja vierekkäisten elementtien marginaalit menevät päällekkäin.

Joten tässä esimerkissä saat ensimmäisen elementin sisällön, jota seuraa yhdistelmäruudun 1em ja sitten toisen elementin sisällön. Siten näiden kahden elementin sisältö on 1 1em:n päässä toisistaan.

Tämä voi olla erittäin hyödyllistä, kun tiedät, että haluat kertoa elementtien väliin 1em välilyönnin riippumatta siitä, minkä elementin vieressä se on.

Kaksi muuta suurta eroa ovat, että pehmusteet sisältyvät napsautusalueeseen ja taustan/kuvan väriin, mutta ei laatikkoon.

Paras mitä olen nähnyt selittävän sitä esimerkeillä, kaavioilla ja jopa "kokeile itse" on tämä.

Alla oleva kaavio näyttää hetkellisen visuaalinen esitys erosta.

Yksi asia on pidettävä mielessä, että standardien mukaiset selaimet (IE:n omituisuudet ovat poikkeus) näyttävät vain osan sisällöstä annettu leveys, joten seuraa tätä asettelulaskelmissasi. Huomaa myös, että ikkunakehyksessä on Bootstrap 3 -tuki.

MARGIN vs PADDING:

Marginaalia käytetään elementissä luomaan etäisyys kyseisen elementin ja sivun muiden elementtien välille. Kun täytetystä käytetään luomaan etäisyys sisällön ja elementin reunan välille.

Marginaali ei ole osa elementtiä, kun täyttö on osa elementtiä.

Kysymykseesi on teknisempi selitys, mutta jos etsit tapaa ajatella marginaaleja ja pehmusteita, jotka auttavat sinua valitsemaan, milloin ja miten niitä käytetään, tämä saattaa auttaa.

Vertaa lohkon osia seinällä roikkuviin kuviin:

• Selainikkuna on kuin seinä.
• sisältö muistuttaa valokuvausta.
• marginaali on kuin kehystettyjen kuvien välinen tila.
• lisäys on kuin matto kuvan ympärille.
• Reunus on samanlainen kuin kehyksen reunus.

Kun päätät marginaalista ja pehmusteesta, on hyvä nyrkkisääntö käyttää marginaalia, kun sijoitat elementin suhteessa muihin seinän ja pehmusteen asioihin. > kun määrität ulkomuoto itse elementti. Marginaali ei muuta elementin kokoa, mutta täyttö yleensä tekee elementistä suuremman kuin 1 .

1 Tätä oletusikkunamallia voidaan muuttaa box-sizing-attribuutilla.

Mitä tulee marginaaleihin, sinun ei tarvitse huolehtia elementin leveydestä.

Aivan kuten kun annat jotain (täyte: 10px;), sinun on pienennettävä elementin leveyttä 20 pikseliä, jotta se pysyy "sopivana" eikä riko muita elementtejä sen ympäriltä.

Joten aloitan yleensä käyttämällä pehmusteita saadakseni kaiken "pakattua" ja sitten käytän marginaaleja pienten säätöjen tekemiseen.

Toinen asia, joka on huomioitava, on, että pehmusteet ovat paremmin yhteensopivia eri selaimet, ja IE ei käsittele negatiivisia marginaaleja kovin hyvin.

Tässä on HTML-koodia, joka osoittaa, kuinka täyte ja marginaali vaikuttavat napsautussuhteisiin ja taustan täyttöön. Objekti saa napsautuksia täytetään, mutta napsauttaa objektin marginaalialuetta siirtyäkseen pääobjektiin.

$(.outer").click(function(e) ( console.log("outer"); e.stopPropagation(; )); $(.inner").click(function(e) ( console.log("inner"); e.stopPropagation(); )); .outer ( täyttö: 10px; tausta: punainen; ) .inner (marginaali: 10px; täyttö: 10px; tausta: sininen; reunus: tasainen valkoinen 1px; )

Marginaalit tyhjentävät elementin ympärillä olevan alueen (reunuksen ulkopuolella), mutta täyttö tyhjentää alueen sisällön ympäriltä (reunuksen sisällä).

tämä tarkoittaa, että elementtisi ei tiedä siitä ulkorajoja joten jos kehität dynaamisia verkkosäätimiä, suosittelen käyttämään täyttöä ja marginaalia, jos mahdollista.

Huomaa, että marginaalia on käytettävä useita kertoja.

CSS:ssä on kaksi tapaa luoda tilaa elementtien ympärille: marginaalit ja täyte. Useimmissa käyttötapauksissa ne ovat toiminnallisesti identtisiä, mutta todellisuudessa ne käyttäytyvät hieman eri tavalla. Marginaalien ja täytön välillä on tärkeitä eroja, jotka sinun tulee ottaa huomioon valittaessa, mitä käytetään elementtien siirtämiseen sivulla. Kuitenkin tapauksissa, joissa mitä tahansa marginaalia tai pehmustetta voidaan käyttää samaan vaikutukseen, monet päätökset perustuvat henkilökohtaisiin mieltymyksiin.

Milloin kenttiä käytetään

Haluat, että välit näkyvät luodun laatikon ulkopuolella rajan omaisuutta. Marginaalit ovat rajojen ulkopuolella, joten käytät niitä, jos haluat rajasi pysyvän yhdessä paikassa. Tästä voi olla hyötyä, jos sinulla on esim. sivupaneeli reunalla, jonka haluat siirtää pois pääsisältöalueelta.

Et halua taustavärin tai kuvan tunkeutuvan henkilökohtaiseen tilaan. Taustavärit ja kuvat pysähtyvät rajalla, joten jos haluat mieluummin pitää taustasi tekemäsi tilan ulkopuolella, marginaalit ovat haluamasi ominaisuus.

Haluat nollata tilaa elementin ylä- ja alaosassa. Ylä- ja alamarginaalit toimivat eri tavalla kuin sivureunukset, jos kaksi kenttää asetetaan päällekkäin, ne kutistuvat suurimman kenttäjoukon kokoisiksi. Jos esimerkiksi asetan kappaleen ylämarginaalin 20 pikseliä ja alamarginaalia 15 kuvapistettä, kappaleiden välissä on vain 20 kuvapistettä (kaksi marginaalia hajoavat päällekkäin, ja suurin voittaa).

Milloin käyttää tiivistettä

Haluat kaiken luomasi tilan olevan rajojen sisällä. Täyte on reunustesi sisällä, joten se on hyödyllinen työntämään reunukset pois elementin sisällä olevasta sisällöstä.

Haluat taustavärisi/kuvasi jatkuvan luomassasi tilassa. Taustasi jatkuu lisäyksen jälkeen, joten käytä sitä vain, jos haluat taustasi ulkoasun.

Haluat ylä- ja alaosasi käyttäytyvän jäykemmin. Jos esimerkiksi määrität asiakirjan kappaleiden ylätäyttöön 20 pikseliä ja alatäyttöön 15 pikseliä, aina kun sinulla oli kaksi kappaletta riviä kohden, niiden välissä on yhteensä 35 pikseliä.

Ero laajennetun kentän ja selityksen välillä

Ei ole käytännöllistä käyttää täyttöä elementin sisältötilassa; sinun tulee käyttää marginaalia lapsielementissä. Vanhat selaimet, esim Internet Explorer, tulkitsi väärin ikkunamallin paitsi käytettäessä marginaalia , joka toimii hyvin Internet Explorer 4:ssä.

Täytössä on kaksi poikkeusta:

Se koskee rivielementtiä, joka ei voi sisältää alielementtejä, kuten syöttöelementtiä.

Korvaat suuresti erilainen virhe selain, jota myyjä *yskä* Mozilla *yskä* kieltäytyy korjaamasta, ja varmistuaksesi (sikäli kuin vaihdat säännöllisesti W3C- ja WHATWG-editorien kanssa), sinulla pitäisi olla toimiva ratkaisu ja tämä päätös ei vaikuta minkään muun kuin korjaamasi virheen tyyliin.

Kun elementti on 100 % leveä ja täytettävä: 50px; , saat leveyden: calc(100% + 100px); . Koska marginaalia ei lisätä leveyteen, se ei aiheuta odottamattomia asetteluongelmia, jos käytät marginaalia alatason elementeissä sen sijaan, että täytettäisiin suoraan elementissä.

Joten ellet tee jompaakumpaa näistä kahdesta asiasta, älä lisää elementtiin täyttöä, vaan käytä siinä lapsi/lapset-elementtiä varmistaaksesi odotetun toiminnan kaikissa selaimissa.

Katsotaanpa ensin, mitkä ovat erot ja mitä kukin vastuu on:

1) Marginaali

Ominaisuudet CSS-kentät käytetään luomaan tilaa elementtien ympärille.
Marginaaliominaisuudet määrittävät reunan marginaalin ulkopuolella olevan tilan koon. CSS:n avulla hallitset kentät täydellisesti.
CSS-ominaisuuksilla voit asettaa marginaalin elementin jokaiselle puolelle (ylä, oikea, alhainen ja vasen).

2) Tiiviste

CSS-laiteohjelmiston ominaisuuksia käytetään luomaan tilaa sisällön ympärille.
Täyte tyhjentää elementin sisällön ympärillä olevan alueen (reunuksen sisällä).
CSS:n avulla sinulla on täysi hallinta lisäyksen yli. CSS-ominaisuuksilla voit asettaa täytteen elementin jokaiselle puolelle (ylä, oikea, alhaalla ja vasemmalla).

Yksinkertaisesti sanottuna Marginaali on tilaa elementtien ympärillä ja täyte on tilaa elementin osana olevan sisällön ympärillä.



Tämä codemancersin kuva näyttää, kuinka rajat ja rajat tulevat saavutettaviksi ja kuinka rajat ja sisältölaatikko tekevät niistä erilaisia.

Foorumeilla vaeltaessani törmäsin siihen, että edelleen herää kysymys, mitä pehmuste tekee ja mitä marginaali tekee ja mitä eroja niillä on. Siksi päätin muistuttaa teitä tästä. Joten turvautumatta töykeisiin lauseisiin, asetetaan ongelma ja katsotaan esimerkkiä, jossa kaikki tulee selväksi.

Tehtävä: sivulla Tarvitsen punaisen lohkon(200x200 pikseliä), mikä vetäytyy selaimen reunoista ylhäällä ja vasemmalle 40 ja 70 pikselillä, ja jonka sisällä oleva teksti on sisennetty vasemmalle ja ylhäältä 40 pikselillä.

Ratkaisu: katso kuvaa ja koodia. Punainen lohkomme ei saa ylittää 200 x 200 pikseliä ja se tulee sisentää selaimen (tai muiden sisältölohkojen) reunoista. Itse asiassa teemme nämä sisennykset marginaalin kautta. Jos teemme täytön, sisennys tapahtuu punaisen lohkomme sisällä ja sisennys saadaan itse lohkon taustalla (eli punaisella).


.lohko(
leveys: 160 pikseliä;
korkeus: 160px;
taustaväri: punainen;
marginaali yläreuna: 40px;
marginaali vasen: 70px;
täyte-top: 40px;
täyte-vasen: 40px;
}


tekstiä, tekstiä, paljon tekstiä, paljon tekstiä


Käytettyjen ominaisuuksien (rivit 6-9) lisäksi löytyy myös ominaisuudet margin-right, padding-right, margin-bottom, paddding-bottom - ne ovat vastaavasti sisennystä varten oikealle ja alapuolelle. Kaikkien näiden ominaisuuksien arvot voivat olla pikseleinä (px), prosentteina (%) tai em-yksiköinä.

Periaatteessa siinä kaikki. Niiden kanssa työskentelyssä on kuitenkin vielä joitain ominaisuuksia.

Reunuksen ja pehmusteen ominaisuudet

Pehmustetta käytettäessä täytteen mitat tulee vähentää lohkon korkeudesta ja leveydestä, muuten lohkon koko kasvaa pehmusteen koolla.

Jos lohkolle annetaan marginaali-vasen ja marginaali-oikea arvot auto, niin jos lohkolla on kiinteä leveys (esimerkiksi 400px) eikä siinä ole float CSS -ominaisuutta, tämä lohko kohdistetaan keskelle. elementistä, jossa se sijaitsee. Itse asiassa ei-kumi-asettelussa, jossa on keskikohdistus, käytetään yleensä tätä kohdistusmenetelmää. Huolimatta siitä, että IE 5.5 ja aiemmat versiot eivät tue automaattista arvoa, tämä ei silti estä sinua käyttämästä sitä jatkuvasti =).

Taulukoissa ei ole suositeltavaa käyttää täyttöä ja marginaalia, koska vaikutus on arvaamaton eri selaimissa.

Ja viimeinen asia, jonka halusin sanoa. Älä unohda käyttää lyhennettyjä merkintärakenteita, kuten marginaali: 10px 0 5px 20px;. Jos sisennys on nolla, voit yksinkertaisesti laittaa nollan määrittelemättä parametreja. On erittäin helppo muistaa, mikä parametreista liittyy mihinkin rajaan - lohkossa sisennykset kulkevat myötäpäivään: ensimmäinen numero on ylhäällä, toinen oikealla, kolmas on alapuolella, neljäs on vasemmalle.

Se on oikeastaan ​​kaikki, mitä halusin kertoa sinulle tänään. Hyvää viikonloppua kaikille!

Kuvaus

Asettaa täytön määrän elementin jokaisesta reunasta. Marginaali on tila nykyisen elementin reunasta sen pääelementin sisäreunaan (kuva 1).

Riisi. 1. Sisennä elementin vasemmasta reunasta

Jos elementillä ei ole ylätasoa, täyttö on etäisyys elementin reunasta selainikkunan reunaan ottaen huomioon, että myös itse ikkunassa on oletusarvoisesti täyttö asetettuna. Päästäksesi eroon niistä, sinun tulee asettaa valitsimen marginaaliarvo nollaan.

Marginaaliominaisuuden avulla voit asettaa marginaalin arvon elementin kaikille sivuille kerralla tai määrittää sen vain määritetyille sivuille.

Syntaksi

marginaali: [arvo | korko | auto] (1,4) | periä

Arvot

Voit käyttää yhtä, kahta, kolmea tai neljää arvoa välilyönnillä erotettuna. Vaikutus riippuu arvojen lukumäärästä ja näkyy taulukossa. 1.

Sisennysmäärä voidaan määrittää pikseleinä (px), prosentteina (%) tai muina hyväksyttävinä arvoina. CSS-yksiköt. Arvo voi olla joko positiivinen tai negatiivinen luku.

Automaattinen Määrittää, että selain laskee automaattisesti sisennyksen määrän. inherit Perii vanhemman arvon.

HTML5 CSS2.1 IE Cr Op Sa Fx

marginaali runko ( marginaali: 0; /* Poista täyttö */ ) .parent ( marginaali: 20%; /* Täyte elementin ympärillä */ tausta: #fd0; /* Taustaväri */ täyte: 10px; /* Marginaali elementin ympärillä teksti * / ) .child ( reunus: 3px solid #666; /* Reunusasetukset */ täyttö: 10px; /* Reunukset tekstin ympärillä */ marginaali: 10px; /* Täyte */ ) Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tulos tämä esimerkki esitetty kuvassa. 2.



Riisi. 2. Marginaaliominaisuuden käyttäminen

Objekti malli

document.getElementById("elementID").style.margin

Selaimet

Internet Explorer 6 quirk-tilassa ei tue lohkon keskittämistä marginaalilla: 0 automaattinen sääntö. Tässä selaimessa on myös virhe, jossa yläelementtien sisällä sisäkkäisten kelluvien elementtien vasemman tai oikean täyttöarvon tuplaantuminen. Vanhemman puolen vieressä oleva marginaali kaksinkertaistuu. Ongelma ratkaistaan ​​yleensä lisäämällä kelluvaan elementtiin display: inline.

Internet Explorerin versiot 7.0:aan asti eivät tue periytymisarvoa.

Huomautus

U lohkon elementtejä sijaitsevat pystysuunnassa vierekkäin, romahdusvaikutus havaitaan, kun sisennyksiä ei lasketa yhteen, vaan yhdistetään toisiinsa. Itse tiivistys vaikuttaa kahteen tai useampaan lohkoon (toinen voidaan upottaa toisen sisälle), joiden ylä- tai alaosassa on sisennykset, kun taas vierekkäiset sisennykset yhdistetään yhdeksi. Vasemman ja oikeanpuoleisen pehmusteen kohdalla kokoontaitumista ei koskaan käytetä.

Tiivistys ei toimi:

• elementeille, joiden täyttöominaisuus on asetettu tiivistävälle puolelle.
• elementeille, joiden raja on määritelty kokoonpuristuvalla puolella;
• elementtien kanssa absoluuttinen paikannus, eli ne, joiden asema on asetettu absoluuttiseksi;
• kelluvilla elementeillä (joille float-ominaisuus on asetettu vasemmalle tai oikealle );
• varten sisäisiä elementtejä;
• .

Hei rakkaat blogisivuston lukijat. Tänään haluan jatkaa opiskelua ja pohtia niitä tyylisääntöjä, joiden avulla voit asettaa sisennyksiä ja reunuksia HTML-elementtejä: reuna, marginaali ja täyte.

Ennen tätä onnistuimme opiskelemaan aika paljon yksinkertaiset ominaisuudet joka manipuloi fontteja(), text() ja katsoi mallia

Kyllä, onnistuimme myös harkitsemaan yksityiskohtaisesti käyttöperiaatteet (laajentuen useisiin artikkeleihin). Nyt on aika siirtyä sääntöihin, jotka muodostavat perustan dokumenttien (verkkosivujen) rakentamiselle, ja aloitamme lohkomallista (HTML-elementtien suhde).

Yleisesti ottaen olen jo kirjoittanut modernista teknologiasta, mutta tänään päästään puhtaisiin yksityiskohtiin. Jos haluat katsoa aikaisemmat julkaisut aiheesta, niin olet tervetullut .

Block malli CSS:ssä - täyte, marginaali ja reunus

Kolmanneksi korkoa voidaan käyttää. Mistä ne lasketaan? Osoittautuu, että säilön leveys (eli sisältöalue pääelementti). Lisäksi tämä ei koske vain marginaalia oikeaa ja vasenta, mikä olisi loogista, vaan myös marginaalin ylä- ja alareunaa, prosenttiosuudet lasketaan tarkasti säiliön leveydestä (eikä korkeudesta).

Mitta-arvojen asettamisesta puhuttaessa tulee huomioida, että marginaali voi olla myös negatiivinen. Nuo. määritettäessä positiivista arvoa ulkomarginaalille siirrämme viereisen elementin määritetylle etäisyydelle, ja jos määritämme negatiivisen arvon, naapurilohko yksinkertaisesti menee päällekkäin sen kanssa, jolle asetamme tämän negatiivisen sisennyksen. Ja tätä käytetään hyvin usein CSS:ssä.

No, on sanomattakin selvää, että on olemassa esivalmistettu CSS Marginaalisääntö, jonka avulla voit monissa tapauksissa pienentää vaaditun määrittämiseen käytettävän koodin kokoa marginaalit. Sen arvojärjestys on tiukasti säännelty (ne on kirjoitettu läpi avaruusmerkki) ja sen pitäisi vastata esimerkkiä:

Nuo. Luettelo alkaa ylhäältä ja jatkuu myötäpäivään, kunnes ympyrä päättyy oikeaan sisennykseen. Se voi näyttää jotain tältä:

Marginaali: 20px 10px 40px 30px;

Ja tämä tarkoittaa, että lohkomme yläpuolella olevan selaimen tulee sisentää 20 pikseliä, oikealla - 10, alapuolella - 40 ja vasemmalla - 30. Eli. tämä merkintä vastaisi:

CSS-koodin väheneminen näkyy paljaalla silmällä. Mutta tämä ei ole raja. On täysin hyväksyttävää käyttää ei vain neljää, vaan myös kolmea, kahta ja jopa vain yhtä arvoa esivalmistetussa säännössä. Tämä auttaa edelleen pienentämään koodin kokoa. On kuitenkin mahdollista vähentää arvojen määrää vain tietyissä tapauksissa:

• Jos marginaalit vasemmalla ja oikealla ovat samat, esimerkiksi näin: margin:20px 30px 40px 30px;

  Tuo viimeinen voidaan jättää pois:

  Marginaali: 20px 30px 40px;

  Nämä kaksi esivalmistettua sääntömerkintää tekevät saman asian. Siksi, jos näet marginaalissa merkinnän, jossa on kolme arvoa, neljännen arvo (oikealla) näkyy toisessa (vasemmalla).

  Jos sisennykset ylä- ja alapuolella ovat yhtä suuret, tällainen temppu ei enää toimi, koska loogisesti on mahdollista pienentää esivalmistetun sääntötietueen rakennetta vain leikkaamalla päällekkäiset arvot sen lopusta (ja alemman arvosta). luetelmakohta on toiseksi viimeinen).

• Jos vasemmalla ja oikealla olevien ulkoisten marginaalien yhtäläisyyden lisäksi ylä- ja alareunassa on samat arvot: marginaali:20px 30px 20px 30px;

  tai mikä on sama (1 kohdan johdosta):

  Marginaali: 20px 30px 20px;

  Sitten tällainen esivalmistettu sääntö voidaan kirjoittaa vain kahdella arvolla, hylkäämällä viimeinen, joka on sama kuin ensimmäinen:

  Marginaali: 20px 30px; Tässä tapauksessa ensimmäinen arvo kuvaa ulkoisia marginaaleja pystysuunnassa ja toinen - vaakasuunnassa.

• Ja lopuksi, jos kaikki tehdasvalmisteisen säännön arvot ovat samat: marginaali:20px 20px 20px 20px;

  tai joka on sama (2 kohdan johdosta):

  Marginaali: 20px 20px;

  Sitten on mahdollista käyttää lyhennettä tietuetyyppiä (hylkäämällä viimeinen arvo, joka vastaa ensimmäistä):

  Marginaali: 20px; Tämä tarkoittaa samaa marginaalia HTML-elementin kaikilla puolilla.

Ulkoisista marginaaleista puhuttaessa kannattaa mainita sellainen järjestelmä kuin "marginaalien romahtaminen" tai toisin sanoen "murtuvat marginaalit". Pähkinänkuoressa tämän ilmiön ydin on seuraava.

Jos meillä on kaksi lohkoa, jotka sijaitsevat toistensa alla (reunusten romahtaminen voi tapahtua vain pystysuunnassa) ja molemmille on asetettu vastakkaiset ulkomarginaalit (esim. yläelementti ja ylempi sisennys alemmalle), sitten suurempi Marginaaliarvo imeytyy vähemmän.

Esimerkiksi, jos ylälohko on asetettu:

Marginaali: 20px 20px 200px 20px;

Ja alimmalle:

Marginaali: 100px 20px 20px 20px;

Tällöin ylemmän lohkon alamarginaali (200px) absorboi alemman ylemmän marginaalin (100px, ja vaikka siitä tulisi 199px, mikään ei muutu) ja tuloksena oleva ulkoinen marginaali näiden kahden lohkon välillä on silti yhtä suuri kuin 200 pikseliä. Nuo. Vain suurempi modulo marginaali otetaan huomioon, eikä se summaudu millään tavalla pystysuoraan viereisen elementin vasta-arvoon.

Tämä on salpa, joka toimii yksinomaan pysty- ja vaakasuunnassa, vastakkaiset marginaalimitat yksinkertaisesti lisätään toisiinsa. Mutta tämä koskee vain marginaaleja, joilla on sama merkki, mutta jos ne ovat kanssa erilaisia ​​merkkejä, niin niiden numerot yksinkertaisesti lasketaan yhteen ja lohkot erotetaan toisistaan ​​tuloksena olevan arvon mukaan.

Esimerkiksi tässä tapauksessa:

Ylämarginaali: 20px 20px -20px 20px; Alamarginaali: 10px 20px 20px 20px;

Tuloksena oleva marginaali lohkojen välillä on -10px, ts. alin 10 pikseliä päällekkäin suosituin HTML elementti.

Toinen marginaalisäännön käytön ominaisuus CSS:ssä on, että rivielementtien määritetty pystysuora arvo ohitetaan. Kysymällä:

Marginaali: 20px;

Esimerkiksi , joka on upotettu elementti, näemme itse asiassa vain vaakasuuntaisen täytön, eikä muutoksia tapahdu pystysuunnassa.

Hieman eteenpäin katsoen sanon, että rivitunnisteiden pystysuora täyttö toimii, mutta lisääntynyt sisäinen täyte ei vaikuta siihen millään tavalla yleinen tilanne suhteessa muihin viereisiin elementteihin.

Lohkotunnisteen (otsikot, kappaleet) tapauksessa pystysuuntaisen täytön lisääminen siirtäisi tätä elementtiä suhteessa muihin viereisiin lohkoihin.

No, kehys (Border) tai pikemminkin sen leveys ei myöskään pysty liikkumaan pystysuunnassa rivitunniste muut naapurikorttelit. Inline-elementeillä liike on mahdollista vain yhteen suuntaan - vaakasuoraan ja siinä se.

Pehmuste ja reuna - sisäinen pehmuste ja kehykset

Siirrytään nyt täytön asettamiseen täyttösäännöllä ja katsotaan tarkalleen, mitä arvoja se voi ottaa:



Kuten näette, tässä ei mainita automaattista, eikä tämä CSS-sääntö salli negatiivisten arvojen käyttöä (ne voivat olla vain positiivisia - nollasta ja yli). Nuo. Kanssa käyttämällä pehmustetta Sisältöä ei voi työntää kehyksen ulkopuolelle. Maksimi, mitä voidaan tehdä, on tuoda sisältö hyvin lähelle kehystä.

Sen prosenttiosuudet lasketaan samalla tavalla kuin Marginaalissa - suhteessa sen säiliön leveyteen (emoelementin sisältöalue), johon elementtimme sisältyy. Css:n täytesääntö muodostuu ja noudattaa samoja lakeja kuin edellä on käsitelty:

Täyte: 20px 10px 40px 30px;

Tässä säännössä kuvataan ylhäältä alkaen kaikki neljä puolta. Jos sinun on vähennettävä jotain siinä (kolmeen, kahteen tai jopa yhteen arvoon), sinun on käytettävä yllä kuvattuja vähennysperiaatteita ulkoisille sisennyksille, jotka toimivat täsmälleen samalla menestyksellä sisäisillä.

Ja viimeinen asia, jonka tänään haluaisin pohtia, on kehys, jolla se on asetettu käyttämällä Borderia. Niissä on kolmen tyyppisiä parametreja:

• Border-width — määrittää reunuksen paksuuden
• Border-color — määrittää sen värin
• Reunatyyli - kehyksen tyyppi tai viivan tyyppi, jolla se piirretään

Kaikilla kolmella näillä CSS-säännöillä on kelvollinen arvojoukko:



Kehyksen viivanleveys (Border-width) voidaan määrittää joko Em-, Ex- tai Px-numeroilla tai sanoilla:

• Ohut - ohut viiva;
• Keskitaso - keskitaso ( annettu arvo käytetään oletuksena);
• Paksu - paksu.
border-width:2px;

Reunuksen värin (Border-color) arvona voit käyttää hyväksyttyjä menetelmiä niiden asettamiseen ( heksadesimaalikoodi, sanat jne.):

Reunuksen väri: punainen;

Oletusarvoisesti, jos reunan väriä ei ole erikseen määritetty, käytetään elementin sisällä olevaa fonttia.
CSS Rajatyylinen omaisuus voit määrittää kehyksen tyypin sanoilla:

• Ei mitään – ei kehystä (oletus)
• Pisteviiva - viiva piirretään pisteinä
• Katkoviiva – katkoviiva
• Kiinteä - kiinteä viiva
• Kaksoisviiva
• Ura - painettu runko
• Ridge - ulkoneva
• Sisään ja alkuun - varjopelit

Luonnollisesti, koska missä tahansa lohkossa on neljä sivua, sitä voidaan käyttää yleiset säännöt, ja erillinen kummallekin puolelle:



Sama koskee yhdistettyä reunasääntöä - se voidaan kirjoittaa molemmille puolille samanaikaisesti (Border) ja jokaiselle puolelle erikseen (Border-top, vasen, alhaalla ja oikealla). Arvojen järjestyksellä ei ole merkitystä:

Reuna: 1px tasainen punainen;

Jos unohdat jotain, sen sijaan käytetään oletusarvoa.

Onnea sinulle! Nähdään pian blogisivuston sivuilla

Voit katsoa lisää videoita menemällä osoitteeseen ");">


Saatat olla kiinnostunut

Korkeus, leveys ja ylivuoto - CSS-säännöt kuvaamaan sisältöaluetta lohkoasettelussa
Sijainti (absoluuttinen, suhteellinen ja kiinteä) - tapoja sijoittaa HTML-elementtejä CSS:ssä (säännöt vasemmalle, oikealle, ylhäältä ja alhaalta) Erilaisia ​​malleja sisäisille ja Ulkoiset linkit CSS:n kautta
Float ja selkeä CSS-työkaluissa lohkon asettelu
Näytä (esto, ei mitään, upotettu) CSS:ssä - aseta HTML-elementtien näyttötyyppi verkkosivulla