Forrás: margó vagy padding?
Philip Sporrer.
Fordítás: vl49.

Mikor jobb a margókat és mikor a kitöltést formázási célokra használni, és ez számít?

Nagyon sokáig küzdöttem a megfelelő válaszok keresésével. És csak miután rengeteg szörnyű, olvashatatlan CSS-kódot írtam, különféle mellékhatásokkal kísérve, bátran mondhattam, hogy megtaláltam az alapvető vaskalapos szabályokat a fent felsorolt ​​problémákkal kapcsolatban.

Az érthetőség kedvéért térjünk át egy tipikus helyzetre, amelyet valószínűleg minden fejlesztő jól ismer. felhasználói felület 2017-ben. Nálunk van a legegyszerűbb kártyasablon.

NÁL NÉL ezt a példát Kétféle intervallum létezik:

kártyák között (kék);

a kártyák és a tartályuk között (zöld);

Itt nagyon fontos megérteni, hogy két különböző fogalommal van dolgunk, amelyeket nem szabad összekapcsolni összekapcsoláskor. Vagyis ha módosítanom kell a kártyák és a tárolójuk közötti távolságot, például legfeljebb 24 pixelre, akkor ez semmilyen módon nem befolyásolhatja a kártyák közötti távolságot.

Példa megvalósítása CSS-sel?

A szó szoros értelmében több ezer módja van egy ilyen sablon létrehozásának margók és kitöltés használatával, de szeretném figyelmébe ajánlani az egyiket, amely bemutatja a margó és a kitöltés tulajdonságainak helyes használatát. Ezenkívül ez a módszer lehetővé teszi, hogy később további kártyákat adjon hozzá.

Tartály(
kitöltés: 16 képpont
}
.card + .card(
margó: 0 0 0 8px;
}

Csak 2 választó és 2 szabály.

Mi a pluszjel funkciója?

Szimbólum + jelenti szomszédos választó. Csak a választó előtt megadott elemet közvetlenül követő elemre mutat.

Amint a fenti képen látható, esetünkben ez a választó fog kiválasztani minden kártya előtt minden más kártya. Tehát a szomszédos választóval minden kártya bal margóját beállíthatjuk, kivéve az elsőt.

Ez azt jelenti, hogy tetszőleges számú kártyát tudunk hozzáadni, amelyek közötti távolság mindig nyolc pixel lesz.

Minden jól működik mindaddig, amíg a kártyák mellé nem kell mást is helyeznünk, mint egy kártyát. Nos, mondjuk egy gombot "Kártya hozzáadása" ("Kártya hozzáadása"):

A már meglévő CSS-részlet alapján valószínűleg nem adnánk .card osztályt a gombot jelző új elemnek, mivel az nem kártya. Hogyan legyen? Megéri létrehozni egy további osztálynevet .add-card , amely ugyanazt a szabályt tartalmazza margó tulajdonsággal, mint a .card osztály? Nem, van jobb megoldás.

Lobotomizált bagoly *+* .

És hogy néz ki. A vicces asszociáció ellenére ez a módszer remekül működik, és azóta is folyamatosan ezt használom, mióta megtudtam. Szóval, mire való ez az egész? Íme egy pillantás a vonatkozó CSS-kódra:

Tartály(
kitöltés: 16 képpont
}
/* Nos, felismerted a lobotomizált baglyot? */
.container > * + * (
margó: 0 0 0 8px;
}

Valószínűleg emlékszik rá, hogy az előző választó minden olyan kártyára vonatkozott, amelyet egy másik kártya előzött meg. Most a segítségével formázhatjuk minden elemet közvetlenül megelőz bármely más elem, természetesen a gombot is beleértve.

Végül is.

Őszintén remélem, hogy az itt bemutatott anyagok segítettek kitalálni, hogy mikor érdemes párnázást használni a tárolóban lévő tartalom elválasztására, és mikor érdemes margót használni.

Befejezésül egy tollprojektet szeretnék bemutatni, amely bemutatja a fenti példákat, valamint két, saját tapasztalataim által igazolt szabályt. Tehát a következőket használjuk:

párnázás- a tartály és a tartalma közötti résekhez.

árrés- a tartályon belüli elemek közötti hézagokhoz.

Megtekintések száma: 427

Sziasztok, a blogoldal kedves olvasói. Ma szeretném folytatni a tanulmányozás témáját, és figyelembe venni azokat a stílusszabályokat, amelyek lehetővé teszik behúzások és szegélyek beállítását Html elemek: szegély, margó és párnázás.

Előtte sikerült tanulmányoznunk meglehetősen egyszerű tulajdonságokat, amelyek a betűtípusokat (), a szöveget () szabályozták, és megvizsgáltuk a modellt

Igen, a használati elveket is sikerült minden részletben figyelembe venni (több cikkre feszítve). Itt az ideje, hogy áttérjünk a dokumentumok (weboldalak) építésének alapját képező szabályokra, és kezdjük a blokkmodellel (a HTML-elemek kapcsolata).

Általánosságban már írtam a modernről, nos, de ma tiszta konkrétumok lesznek. Ha szeretné elolvasni a témában megjelent korábbi publikációkat, várjuk a címen.

CSS dobozmodell – kitöltés, margó és szegély

Harmadszor, százalékok is használhatók. Miből számítanak? Kiderült, hogy a konténer szélességétől(vagyis a tartalom területéről szülő elem). Sőt, ez nem csak a jobb és bal margóra vonatkozik, ami logikus lenne, hanem a felső és alsó margóra is a százalékok a konténer szélességéből (nem magasságából) számítanak.

A méretértékek beállításáról szólva megjegyzendő, hogy Margin negatív is lehet. Azok. a külső behúzás pozitív értékének beállításakor a szomszédos elemet a megadott távolságra mozgatjuk, és ha negatív értéket adunk meg, akkor a szomszédos blokk egyszerűen arra kerül, amelyre ezt a negatív behúzást beállítottuk. És ezt nagyon gyakran használják a CSS-ben.

Nos, magától értetődik, hogy létezik egy előre gyártott CSS Margin szabály, amely sok esetben lehetővé teszi a szükséges margók beállításához használt kód méretének csökkentését. Az értékek sorrendje szigorúan szabályozott (szóköz karakterrel vannak írva), és meg kell egyeznie a mintával:

Azok. a felsorolás felülről (felülről) kezdődik és folytatódik óramutató járásával megegyező a kör végéig a jobb behúzással (jobbra). Valahogy így nézhet ki:

Margó: 20 képpont 10 képpont 40 képpont 30 képpont;

Ez pedig azt jelenti, hogy a böngészőnek 20 képpontot kell behúznia a blokkunk fölé, 10 képponttal jobbra, 40 képponttal alulra és 30 képponttal balra. ez a bejegyzés egyenértékű a következővel:

A CSS-kód rövidítése szabad szemmel látható. De ez nem a határ. Teljesen elfogadható, ha egy előre gyártott szabályban nem csak négyet, hanem három, kettő, sőt csak egy értéket is használunk. Ez tovább segít csökkenteni a kód méretét. Az értékek számának csökkentése azonban csak bizonyos esetekben lehetséges:

1. Ha a bal és a jobb margó megegyezik, például: margó:20px 30px 40px 30px;

   Ez utóbbi kihagyható:

   Margó: 20 képpont 30 képpont 40 képpont;

   Ez a két gyűjtési szabály bejegyzés ugyanazt teszi. Ezért ha a Marginban három értékkel rendelkező bejegyzést lát, akkor a negyedik (jobb oldalon) értéke a másodikban (bal oldalon) látható.

   Felülről és alulról egyenlő behúzás esetén egy ilyen trükk már nem működik, mert logikusan lehetséges az előre elkészített szabály bejegyzés szerkezetének csökkentése, csak levágja a duplikált értékeket a végéről(és az alsó behúzás értéke az utolsó előtti lesz).

2. Ha a bal és jobb oldali margók egyenlősége mellett a fenti és lenti értékek egyenlőek: margó:20px 30px 20px 30px;

   vagy ami megegyezik (az 1. pont értelmében):

   Margó: 20 képpont 30 képpont 20 képpont;

   Hogy egy ilyen előregyártott szabály csak két értékkel írható, az elsőnek megfelelő utolsót elvetve:

   Margó: 20 képpont 30 képpont; Ebben az esetben az első érték a függőleges, a második pedig a vízszintes margókat írja le.

3. És végül, ha az előre elkészített szabályban szereplő összes érték azonos: margó:20px 20px 20px 20px;

   vagy ami megegyezik (a 2. pont értelmében):

   Margó: 20 képpont 20 képpont;

   Ez használható legrövidebb rekordtípus(az elsőnek megfelelő utolsó érték elvetése):

   Margó:20px; Mit jelent ugyanaz a külső behúzás a HTML-elemünk minden oldalán.

Ha a marzsokról beszélünk, érdemes megemlíteni egy olyan sémát, mint "margin összeomlás" vagy más szóval „margin colllapse”. Dióhéjban ennek a jelenségnek a lényege a következő.

Ha van két blokkunk, amelyek egymás alatt helyezkednek el (a margók csak függőlegesen eshetnek össze), és mindkettőnek ellentétes margója van (például alsó a felső elemnél és felső margó az alsónál), akkor a nagyobb margó érték kisebb margót nyel el. egy.

Például, ha a felső blokk a következőre van állítva:

Margó: 20 képpont 20 képpont 200 képpont 20 képpont;

És az aljára:

Margó:100px 20px 20px 20px;

Ekkor a felső blokk alsó margója (200px) elnyeli az alsó felső margóját (100px, és még ha 199px lesz is, akkor sem változik semmi), és a két blokk közötti külső behúzás továbbra is 200 képpont lesz. Azok. Csak a nagyobbat veszik figyelembe. modulo Margin, és semmilyen módon nem ad össze a függőlegesen szomszédos elem ellentétes értékével.

Ez egy olyan trükk, amely kizárólag függőlegesen működik, és vízszintesen az ellentétes margóméretek egyszerűen kiegészítik egymást. De ez csak az azonos előjelű margókra vonatkozik, de ha ezek eltérő előjelűek, akkor a számuk egyszerűen összeadódik, és a blokkokat a kapott érték választja el egymástól.

Például ebben az esetben:

Felső margó: 20px 20px -20px 20px; alsó margó:10px 20px 20px 20px;

A blokkok közötti kitöltés -10px lesz, azaz. az alsó 10 képpont a felső HTML-elemen fog futni.

A CSS-ben a Margin szabály használatának másik jellemzője, hogy a megadott érték soron belüli elemek esetén a függőlegest figyelmen kívül hagyja. Megkérdezve:

Margó:20px;

Például a soron belüli elem esetében csak vízszintes kitöltést fogunk látni, és nem történik függőleges változás.

Kicsit előre tekintve azt mondom, hogy a beágyazott címkék függőleges kitöltése működni fog, de a megnövelt behúzás nem befolyásolja az általános helyzetét a többi szomszédos elemhez képest.

Blokkcímke (címsorok, bekezdések) esetén a függőlegesen megnövelt Padding ezt az elemet a többi szomszédos blokkhoz képest mozgatná.

Nos, a keret (Border), vagy inkább a szélessége, szintén nem tud függőlegesen mozgatni a többi szomszédos blokkot a beágyazott címkéből. Az inline elemeknél a mozgás csak egy irányban lehetséges - vízszintesen és ennyi.

Kitöltés és szegély – kitömés és szegély

Térjünk át a kitöltés beállítására a Kitöltési szabály segítségével, és nézzük meg, milyen értékeket vehet fel:

Amint láthatja, itt nincs szó az Auto-ról, és ez a CSS-szabály sem engedélyezi a negatív értékeket (ezek csak pozitívak lehetnek - nullától és felette). Azok. a Padding segítségével a tartalom nem tolható ki a keretből. Maximum annyi, hogy a tartalmat a kerethez közelítjük.

A benne lévő százalékok kiszámítása ugyanúgy történik, mint a Margónál - annak a tárolónak a szélességéhez (a szülőelem tartalmi területéhez) képest, amelybe az elemünk be van zárva. Előre gyártott padding Rule in Css ugyanazoknak a törvényeknek van megalkotva és betartja, mint fentebb:

Kitöltés: 20px 10px 40px 30px;

Ebben a szabályban felülről indulva mind a négy oldalt leírjuk. Ha valamit csökkenteni kell benne (legfeljebb három, kettő vagy akár egy értékig), akkor a fent leírt redukciós elveket kell használnia a külső behúzásoknál, amelyek pontosan ugyanolyan sikerrel működnek a belsőeknél is.

És az utolsó dolog, amit ma szeretnék megfontolni, az a keretrendszer, amely a használatával van beállítva Határ. Háromféle paraméterük van:

1. Border-width – beállítja a szegély szélességét
2. Border-color – beállítja a színét
3. Szegély-stílus – a keret vagy a vonal típusa, amellyel megrajzolódik

Mindhárom CSS-szabály érvényes értékkészlettel rendelkezik:

A szegély vonalszélessége ( határ-szélesség) megadható mind Em, Ex vagy Px számok segítségével, mind a következő szavakkal:

1. Vékony - vékony vonal;
2. Közepes - közepes (ez az érték alapértelmezés szerint használatos);
3. Vastag - vastag.

border-width:2px;

A keret színének értékeként ( határ-szín) megadásához használhatja az elfogadott módszereket (hexadecimális kód, szavak stb.):

keret színe: piros;

Alapértelmezés szerint, ha a szegély színe nincs kifejezetten beállítva, akkor az adott elemen belüli betűtípushoz használt szín kerül felhasználásra.
A Border-style CSS tulajdonság lehetővé teszi a szegély típusának szavakban történő beállítását:

1. Nincs – nincs szegély (alapértelmezett)
2. Pontozott – a vonal pontokkal van megrajzolva
3. Szaggatott – pontozott
4. Tömör – folytonos vonal
5. Dupla - dupla vonal
6. Groove - behúzott keret
7. Ridge - kidudorodó
8. Inset and outset – árnyjátékok

Természetesen, mivel minden blokknak négy oldala van, így használható Általános szabályok, és külön minden fél számára:

Ugyanez vonatkozik rá Előre elkészített szabályhatár- írható mindkét oldalra egyszerre (Border), és mindegyik oldalra külön-külön (Border-top, bal, alsó és jobb). Az értékek sorrendje nem fontos:

Szegély: 1 képpont folyamatos piros;

Ha valamit kihagyunk, a rendszer az alapértelmezett értéket használja helyette.

Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán

Lehet, hogy érdekel

Magasság, szélesség és túlcsordulás – CSS-szabályok a tartalomterület leírására blokk-elrendezésben
Pozíció (abszolút, relatív és rögzített) – a HTML-elemek elhelyezésének módjai a CSS-ben (bal, jobb, felső és alsó szabályok) Különböző kialakítású belső és Külső linkek CSS-en keresztül
Float and clear CSS - blokk elrendezési eszközök
Megjelenítés (blokk, nincs, soron belüli) CSS-ben – a HTML-elemek megjelenítési típusának beállítása a weboldalon
Listastílus (típus, kép, pozíció) – testreszabható Css-szabályok megjelenés listák be html kódot
Háttér a CSS-ben (szín, pozíció, kép, ismétlés, melléklet) - mindez a háttérszín beállításához ill háttér kép Html elemek
Mire való a CSS, hogyan lehet a lépcsőzetes stíluslapokat csatlakoztatni html dokumentumés ennek a nyelvnek az alapvető szintaxisa Hogyan lehet megváltoztatni a táblázatok, listák és egyéb HTML-elemek sorainak háttérszínét a webhelyen az n-edik álosztály segítségével
Betűtípus (súly, család, méret, stílus) és vonalmagasság szabályai a betűtípusok stílusozásához CSS-ben

Shastaya a fórumokon találkozott azzal a ténnyel, hogy továbbra is felmerül a kérdés, hogy mit csinál párnázás, és akkor árrésés mi a különbség köztük. Ezért döntöttem úgy, hogy emlékeztetek rá. Tehát anélkül, hogy elgondolkodtató kifejezésekhez folyamodnánk, tűzzük ki a feladatot, és elemezzünk egy példát, amely alapján minden világossá válik.

Egy feladat: Az oldalon kell egy piros blokk(200x200 pixel), amely távolodik a böngésző széleitől felül és balra 40, illetve 70 képponttal, és a szöveg, amelyen belül balról és felülről behúzódik 40 képponttal.

Megoldás: nézd meg a képet és a kódot. A piros blokkunk nem haladhatja meg a 200 x 200 pixelt, és a böngésző (vagy más tartalomblokkok) széleitől ki kell tölteni. Valójában ezeket a behúzásokat margón keresztül végezzük. Ha párnázást végzünk, akkor a kitöltés a piros blokkunkon belül történik, és a kitömést magának a blokknak a hátterével (vagyis pirossal) kapjuk.

A használt tulajdonságok mellett (6-9. sorok) léteznek még a margin-right, padding-right, margin-bottom, padding-bottom tulajdonságok - ezek a jobbra, illetve az alsó behúzásokra szolgálnak. Ezen tulajdonságok értékei lehetnek pixelben (px), százalékban (%) vagy em egységben.

Alapvetően ennyi. A velük való munkavégzésnek azonban van néhány egyéb jellemzője is.

A margó és a párnázás jellemzői

Padding használatakor a tömb méreteit le kell vonni a blokk magasságából és szélességéből, ellenkező esetben a blokk mérete a párnázás méretével nő.

Ha valamelyik blokknál beállítja a margó bal és jobb margót automatikus értékekkel, akkor ha a blokk fix szélességű (például 400 képpont) és nincs float CSS tulajdonság, akkor ez a blokk a blokk közepére lesz igazítva. az elem, amelyben található. Valójában a középre igazítású, nem gumis elrendezéshez általában ezt az igazítási módszert használják. Annak ellenére, hogy az IE 5.5 és korábbi verziói nem támogatják az automatikus értéket, ez még mindig nem akadályozza meg, hogy folyamatosan használja=).

A táblázatokban nem ajánlott kitöltés és margó használata, mert a hatás kiszámíthatatlan lesz a különböző böngészőkben.

És az utolsó dolog, amit el akartam mondani. Ne felejtsen el olyan rövidített bejegyzési konstrukciókat használni, mint a margó: 10px 0 5px 20px;. Ha a behúzás nulla, akkor a paraméterek megadása nélkül egyszerűen beírhat egy nullát. Nagyon könnyű megjegyezni, hogy a paraméterek közül melyik melyik határhoz tartozik - a blokknál a behúzások az óramutató járásával megegyező irányba haladnak: az első szám felül, a második a jobb oldalon, a harmadik alul, a negyedik a bal.

Tulajdonképpen ez minden, amit ma el akartam mondani. Kellemes hétvégét mindenkinek!

Ennek a tulajdonságnak egy-négy értéke lehet.

A képen a világosszürke szín jelzi azt a területet, amelyért a párnázási tulajdonság felelős:

1. Amikor megadod négy érték(5px 10px 15px 20px ) - a kitöltés sorrendje a következő lesz: Top(5 képpont ) - Jobb(10 képpont) - alsó(15 képpont) - Bal(20 képpont). Ha meg szeretné jegyezni a behúzás sorrendjét egy deklarációban, használhatja az angol szót TR ou BL e (hol T- felső, R-jobb, B- alsó, L- bal).


2. Amikor megadod három jelentése(5px 10px 15px ) - a kitöltés sorrendje a következő lesz: Top(5 képpont ) - Jobb bal(10 képpont) - alsó(15 képpont).


3. Amikor megadod két érték(5px 10px ) - az első érték (5px ) az elem tartalmának tetejétől és aljától kezdődően állítja be a kitöltés méretét, a második (10px ) érték pedig az elem tartalmától jobbra és balra.


4. Amikor megadod egy érték(5px) - a párnázás minden oldalon azonos méretű lesz - 5px.

Böngésző támogatás

Ingatlan			Opera		IExplorer	él
párnázás	1.0	1.0	3.5	1.0	4.0	12.0

CSS szintaxis:

padding: "hosszúság | kezdeti | öröklődik" ;

JavaScript szintaxis:

object.style.padding = "5 képpont"

Az ingatlanértékek

CSS verzió

CSS1

Örökölt

Nem.

Élénk

Igen.

Használati példa

Hadd mondjam el most, ez egy nagyon fontos lecke. Tanulmányozása után elrendezheti az elemeket az oldalon, behúzhat közöttük, létrehozhatja egy külön meghatározott blokkon belül, margókat állíthat be.

párnázás

A kitöltés egy olyan tulajdonság, amely beállítja az elem kitöltésének mértékét a szegély belső szélétől a tartalomig. A tartalom lehet egyszerű szöveg, kép vagy gyermekelem, amelynek saját margója is lehet.

Az egységek lehetnek pixelek (px) vagy százalékok (%).

#Blokk(
kitöltés: 12px /* kitöltés a blokkszegélyektől a tartalomig - 12 pixel lesz minden oldalon */
}

Egy mezőt csak egy adott oldalon lehet megadni:

párnázott felső- olyan tulajdonság, amely felül margót hoz létre.
párnázás jobbra- a jobb oldalon mezőket létrehozó tulajdonság.
párnázó-alsó- alsó margót létrehozó tulajdonság.
padding-bal- bal oldalon margót létrehozó tulajdonság.

#Blokk(
párnázott alsó rész: 25 képpont /* alsó margó 25 képpont */
padding-bal: 15px; /* bal margó 15 képpont */
}

Ahogy észrevette, ha 2 vagy 3 oldalról ad meg ilyen módon mezőket, akkor hosszú kódot kap. Erre a padding tulajdonságnak van egy rövidített jelölése. Mind a 4 érték felváltva jelenik meg benne - minden éltől egy sorban a mozgás az óramutató járásával megegyező irányban halad, felülről kezdve:

Padding: Felső párnázás jobb Padding Alsó párnázás bal;

#Blokk(
padding: 25px 10px 15px 6px; /* felső 25 képpont, jobb 10 képpont, lent 15 képpont, bal 6 képpont */
}

árrés

A margó tulajdonság a kitöltéstől eltérően beállítja az elemek szegélyei közötti kitöltés mértékét.
Ha az elem gyermek, akkor a kitöltés az elem szegélyétől a szülő szegélyének belső széléig terjedő térköz.
Ha az elemnek nincs szülője, akkor a behúzás a tulajdonság által a környező elemek szegélyének széleihez beállított szabad helynek minősül.

#Blokk(
margó: 4 képpont
}

Ha csak bizonyos oldalakon szeretne behúzást adni, a következő tulajdonságok léteznek:

margin-top- felülről behúzásokat létrehozó tulajdonság.
margó-jobb- olyan tulajdonság, amely a jobb oldalon behúzásokat hoz létre.
margó-alsó- tulajdonság, amely alulról hoz létre behúzásokat.
margó-bal- egy tulajdonság, amely a bal oldalon behúzásokat hoz létre.

A padding tulajdonsághoz hasonlóan a margó is képes rövidíteni az értékeket különböző felek. A mozgás az óramutató járásával megegyező irányba, a felső margótól:

Margó: felső margó jobb margó margó alsó margó bal;

#Blokk(
margó: 15 képpont 10 képpont 5 képpont 25 képpont; /* felső 15 képpont, jobb 10 képpont, lent 5 képpont, bal 25 képpont */
}

Köszönöm a figyelmet!