Margin (mező), padding (szubsztrát) és a blokk modell CSS

Az első részben a „alapjait a CSS” fogunk beszélni árrés (árrés), hordozók (padding) és a blokk modell. Tulajdonságok margin (mező) és a párnázat (a szubsztrát) gyakran használják CSS. Határon böngésző kompatibilitás webhely függ, a legtöbb esetben, az alkalmazás ezeket a tulajdonságokat.

Ebben a cikkben fogjuk vizsgálni a különbség a területen, és az aljzat, mint egy blokk modell érinti böngészők, néhány trükköt szükségesek ahhoz, hogy cross-browser.

Mi az árrés (mező)?

Novice fejlesztők gyakran használják a területen (árrés) és a hordozó (padding) felcserélhető, de jelentős különbségek vannak közöttük.

Field - a tér körül egy elem. Ahhoz, hogy a területen, hogy megfelelően működjön, az elemet kell lennie lebegő (float) vagy viszonylag (összesen: relatív). Ez a tulajdonság gyakran használják mozgatni egy elemet, vagy mozgassa a többi elem körül.

Egy elem lehet azonos mező körül az oldalán, meg kell CSS írva a következő:

Itt vagyunk mindkét oldalán az elemek hozzátesszük 5px területen. Fields lehetnek egyenlő, vagy sem, mert be lehet állítani, hogy minden fél, és mindkét oldalon külön-külön. Értékei az ingatlan lehet írni leegyszerűsítve vagy részletei:

Számos probléma a területeken felmerülő, általában a korai változatát IE.

Kettős Field (Double árrés) kettős területén - ez hiba (bug), amely úgy tűnik, a böngésző IE6 és amellyel megküzdenie. Ha bármely elem úgy definiáljuk, mint egy „lebegő”, egy olyan területen szomszédos oldalán a „szülő elem” kettős. Például, ha van egy lebegő (float: left) elem és bal margó egyenlő 5px. IE6 alakítani a bal mező 10px. Ezt a problémát meg lehet oldani, csak nem csinál egy lebegő elem, vagy adja meg display: inline;. Alsó margó (margin-bottom) minden változata IE mellőzheted az alsó margó, így hogy hozzon létre egy alsó tér, használja a kitöltés tulajdonság.

Mi padding (párna)?

Mint a hordozó területeken (néha behúzás) egy helyet az elem körül. Azonban, ellentétben a mezőket, amelyek meghatározzák a tér külső elem hordozó befolyásolja tér belül és kívül egyaránt a cellában.

Szubsztrátok is rögzíteni kell a formában, vagy egy hagyományos Taming:

Olyan eljárással, amelynek során a hordozót feldolgozott böngésző, az úgynevezett blokk modell. IE6 + (normál módosítás), Firefox, Safari és Chrome számított szubsztrát egyformán, míg a IE5 és alatt a szubsztrátum különbözőképpen számítják.

Szóval, hogyan lehet egy blokk modell és a hordozó munka? Tekintsünk egy elemet (lásd. Lent) 100px szélesség és magasság 100px.

Hozzáad egy elem egyenlő a hordozó (a 10px), mert szükség van, hogy a szöveg az elem belsejében nem érinti a széleit az elem. Azonban, ahogy alant látható, a hordozó nem mozdul a szöveget a sejt belsejében, ez csak az elem több! A hasonlóság a szubsztrátumot a mezők, hogy ez is kívül működik az elem.

Ez megnyilvánult ötlet blokk modell. Hozzáadása 10px hogy 100px szubsztrát elem, mi így növelve annak méretét 120 képpont. (100px elem + 10px + 10px felső alsó = 120 képpont).

Tehát, ha meg akarjuk tartani az elem mérete (100px, hogy 100px) és mozgassa a tartalom az elem belsejében a 10px, be kell állítani a szélességét és magasságát 80px. Akkor mi elem a következőképpen néz ki:

Ezzel szemben a mezőket a megfelelő működéshez felület nem kell csinálni egy lebegő elem vagy helyzet viszonylagos. Azonban, ha ön használ aljzatok mozgatni kívánt elemet vagy áthelyezni minden testvér, meg kell elhelyezni, vagy hogy egy lebegő elem.

több hely

Fields és a hordozó bonyolult lehet cross-böngésző, de a böngésző válasz lesz kiszámítható, ha a szükséges készségek elsajátítását.