A margó és a kitöltési távolságok a következőben vannak megadva. CSS margók és kitöltés: különbség a margó és a kitöltés tulajdonságai között. A behúzás a ház utolsó lehetséges elemére van beállítva

Hadd mondjam el most, ez egy nagyon fontos lecke. Tanulmányozása után elhelyezhet elemeket az oldalon, behúzhat köztük, létrehozhat egy külön blokkon belül, és beállíthat margókat.

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.

A mértékegysé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ázás-alsó: 25px /* 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árna bal;

#Blokk(
padding: 25px 10px 15px 6px; /* felül 25px, jobb 10px, lent 15px, bal 6px */
}

á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 a különböző oldalak értékeinek gyorsírására. 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!

Forrás: margó vagy kitöltés?
Philip Sporrer.
Fordítás: vl49.

Mikor jobb a margókat használni formázási célokra, és mikor a kitöltést, é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, amely valószínűleg minden felhasználói felület fejlesztő számára ismerős lesz 2017-ben. Nálunk van a legegyszerűbb kártyasablon.

Ebben a példában kétféle intervallum különböztethető meg:

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ódszer létezik egy ilyen sablon létrehozására margók és kitöltés használatával, de ezek közül szeretnék egyet bemutatni, 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 8 képpont;
}

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

Mi a pluszjel funkciója?

Szimbólum + képviseli 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 szelektorral az első kivételével minden kártya bal margóját beállíthatjuk.

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 elhelyeznünk. 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 bevált, azóta folyamatosan ezt használom, mióta megtudtam. Szóval, minek 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 8 képpont;
}

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 abban, hogy kitalálja, mikor használjon párnázást a tárolóban lévő tartalom elválasztására, és mikor használjon margót.

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

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

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

Megtekintések száma: 427

Leírás

Beállítja az elem tartalma körüli margók értékét. A margó az elem keretének belső szélétől a tartalmát határoló képzeletbeli téglalapig terjedő távolság (1. ábra).

A padding tulajdonság lehetővé teszi, hogy egyszerre állítsa be a kitöltési értéket az elem minden oldalára, vagy csak a megadott oldalakra definiálja azt.

Szintaxis

padding: [érték | százalék] (1, 4) | örököl

Értékek

Egy, kettő, három vagy négy érték használata megengedett, szóközzel elválasztva. A hatás az értékek számától függ, és a táblázatban látható. egy.

A margók pixelben (px), százalékban (%) vagy más CSS-barát egységekben adhatók meg. Az inherit érték azt jelzi, hogy a szülőtől örökölte. A margó százalékos megadásakor az érték az elem szülőjének szélességéből kerül kiszámításra.

HTML5 CSS2.1 IE Cr Op Sa Fx

Ennek a példának az eredménye az ábrán látható. 2.

Rizs. 2. A padding tulajdonság alkalmazása

Objektummodell

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

Böngészők

Az Internet Explorer 7.0-s verzióig nem támogatja az öröklési értéket.

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, amelyből minden világos lesz.

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.

Döntés: nézd meg a képet és a kódot. A piros blokkunk ne haladja meg a 200 x 200 pixelt, és a böngésző (vagy más tartalomblokkok) széleitől legyen párnázott. Valójában ezeket a behúzásokat margón keresztül végezzük. Ha padding-ot teszünk, akkor a kitöltés a piros blokkunkon belül történik, és a párnázá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 margó-jobb, padding-right, margó-alsó, padding-bottom tulajdonságok - ezek a jobb oldali, illetve az alsó behúzásokhoz valók. Ezen tulajdonságok értékei lehetnek pixelben (px), százalékban (%) vagy em egységben.

Lényegében 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 abban, 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 nullázhat. Nagyon egyszerű megjegyezni, hogy melyik paraméter melyik szegélyhez tartozik - a blokknál a behúzások az óramutató járásával megegyező irányba haladnak: az első szám felül van, a második a jobb oldalon, a harmadik alul, a negyedik a bal oldalon.

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

A padding CSS tulajdonság felelős az elemen belüli kitöltés beállításáért a szegélyétől.

CSS szintaxis kitöltés

padding : jobb felső bal alsó ;

• top - behúzás az elem felső határától;
• jobb - behúzás az elem jobb szélétől;
• alsó - behúzás az elem alsó határától;
• balra - behúzás az elem bal szélétől;

Az értékeket leggyakrabban pixelben adják meg. Százalékok és egyéb elfogadható CSS-egységek szintén megengedettek.

1. megjegyzés
Négynél több érték megengedett. Az értékek számától függően a műveletek eltérőek lesznek:

• Ha 3 értéket adunk meg, akkor az első érték felülről, a második balról és jobbról, a harmadik pedig alulról határozza meg a behúzást.
• Ha 2 értéket adunk meg, akkor az első érték a behúzást felülről és alulról, a második pedig a tartalomtól balra és jobbra állítja
• Ha 1 érték van beállítva, akkor a behúzás minden oldalon ugyanarra a behúzásra kerül. Például:

padding : 10px 10px 10px 10px ; Kompaktabbra állíthatod: kitöltés: 10 képpont

Jegyzet 2
A CSS-margó tulajdonságtól eltérően a negatív kitöltési értékek nem megengedettek.

A kitöltésnek 4 különálló CSS ​​tulajdonsága van. Mindegyikük felelős valamilyen irányért.

• padding-left - kitöltés az elem bal szélétől;
• padding-right - kitöltés az elem jobb szélétől;
• padding-top - kitöltés az elem felső szegélyétől;
• padding-bottom - padding az elem bal szélétől;

például

padding : 3px 5px 7px 10px ; Vagy megadhatja részletesen: padding-bal : 10px ; padding-right : 5px ; padding-top : 3px ; padding-bottom : 7px ;

Példák különböző behúzással egy elemen belül

1. példa: Szöveg behúzása egy címkén belül

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта