Ebben a cikkben szeretném elmondani, hogyan kell helyesen elhelyezni mezőket(padding) és behúzás(margó) a CSS-ben.

Mindenekelőtt emlékezzünk a margók és a padding meghatározására a W3C specifikáció szerint. A dobozmodellben a margók a tartalom és a doboz szegélye közötti távolságot jelentik. A kitöltés pedig egy blokk határa és egy szomszédos vagy szülőelem szegélye közötti távolság.

Így ha az elem szegélye és háttere nincs megadva, akkor nincs különbség, használja a padding vagy margin tulajdonságot a behúzások beállításához, de feltéve, hogy az elem szélessége (szélessége) és magassága (magassága) nincs megadva valamint a tartalomméretek dobozméretezési tulajdonságok segítségével történő kiszámításának algoritmusa.

Mindenesetre ne feledje, hogy a margók beletartoznak az elem szélességébe vagy magasságába, vagy nem. A behúzások mindig az elemen kívül vannak beállítva.

Most nézzük meg, hogyan kell helyesen elhelyezni a margókat és az elemek közötti teret. Vegyük példaként a következő blokkot.

Ez a hírblokk. Ez egy fejlécből, egy hírlistából és egy „Egyéb hírek” hivatkozásból áll. Adjuk meg nekik a következő osztályneveket: news__title, news__list és news__more-link.

Mivel ezeknek az elemeknek ugyanaz a bal és jobb margója van, jobb, ha a margókat a szülőblokkhoz állítja be, nem pedig az egyes elemek bal és jobb margóját külön-külön.

Hírek ( kitöltés: 20px 25px; )

Így, ha módosítani kell a jobb és bal oldali mezők értékét, akkor ezt meg kell tenni Egy helyen. Ha pedig új elemet adunk hozzá a hírblokkon belül, akkor már bal és jobb oldalon is meglesz a szükséges behúzás.

Gyakran előfordul, hogy egy blokkon belül minden elem bal és jobb oldalon azonos kitöltéssel rendelkezik, kivéve egyet, amelyen például a háttér miatt egyáltalán nem kellene kitölteni. Ebben az esetben negatív kitöltést állíthat be az elemhez. Ekkor nem kell eltávolítania a mezőket a blokkon belül más elemekhez.

Most be kell állítania az elemek közötti függőleges margókat. Ehhez meg kell határoznia, hogy az elemek közül melyik kötelező. Nyilvánvaló, hogy hírblokk nem létezhet hírlista nélkül, ugyanakkor előfordulhat, hogy nincs benne „Egyéb hírek” hivatkozás, a cím is eltávolítható például a design megváltoztatásakor.

Ezt figyelembe véve a címnél alul a behúzást, az „Egyéb hírek” hivatkozásnál felül a behúzást állítottuk be.

News__title ( margó-alsó: 10px; ) .news__more-link ( margin-top: 12px; )

Ugyanezt a külső eredményt érhetjük el, ha a hírlista tetejére és aljára párnázunk.

Hírek__lista ( margó: 10 képpont 0 12 képpont 0; )

Most be kell állítania a behúzásokat az egyes hírek között. Ismételten kérjük, vegye figyelembe, hogy a hírek száma változhat, és csak egy hír szerepelhet a listán.

Minden hírhez beállíthat felső behúzást, kivéve az elsőt, vagy alsó behúzást minden hírhez, kivéve az utolsót. Az első lehetőség előnyösebb, mert a:first-child pszeudoválasztót hozzáadták a CSS 2.1 specifikációhoz, és szélesebb támogatást élvez, ellentétben a:last-child pszeudoválasztóval, amely csak a CSS 3.0 specifikációban került hozzáadásra.

Hírek__lista-elem ( margó felső: 18 képpont; ) .hírek__lista-elem: első gyermek ( margó teteje: 0; )

Így a margók és behúzások helyes elhelyezése lehetővé teszi bármely blokk megjelenésének rugalmas megváltoztatását anélkül, hogy a stílusokon módosítanánk, és a tervezés megzavarása nélkül. A legfontosabb dolog annak meghatározása, hogy mely blokkelemek a főbbek ( kötelező), és melyek választható.

Néha nem támaszkodhatunk a szükséges elemekre. Például van egy felugró ablakunk, amelyen belül néhány cím és szöveg jeleníthető meg. Sőt, bizonyos esetekben előfordulhat, hogy nincs szöveg, és néhány esetben nincs cím. Vagyis mindkét elem nem kötelező.

Ebben az esetben a következő módszert használhatja a behúzások beállításához.

Popup__header + .popup__text ( margó felső: 15 képpont; )

Ekkor a behúzás csak akkor jelenik meg, ha mindkét elemet használjuk. Csak a cím vagy csak a szöveg megjelenítése esetén nincs külön behúzás.

Függőleges margók összecsukása

Egy másik árnyalat, amelyről nem mindenki tud, a szomszédos blokkok közötti függőleges terekhez kapcsolódik. A behúzás fentebb megadott definíciója szerint a behúzás a közötti távolság határok jelenlegi és szomszédos blokkok. Így ha két blokkot egymás alá helyezünk és az egyiknek 30px alsó, a másiknak 20px felső margót adunk, akkor a köztük lévő margó nem 50px, hanem 30px lesz.

Vagyis a behúzások átfedik egymást, és a blokkok közötti behúzás egyenlő lesz a legnagyobb behúzással, nem pedig a behúzások összegével. Ezt a hatást "összeomlásnak" is nevezik.

Kérjük, vegye figyelembe, hogy a vízszintes behúzások a függőlegesekkel ellentétben nem „összecsukódnak”, hanem összegzik. A mezők (padding) összegzése is megtörténik.

A behúzások „összeomlásának” ismeretében ezt a funkciót előnyünkre használhatjuk. Például, ha egy cikken belül be kell húznunk a címsorokat és a szöveget, akkor az első szintű címsor alsó behúzását 20 képpontra állítjuk, a második szintű címsornál pedig a felső behúzást 20 képpontot, az alsót pedig 10 képpontot. minden bekezdés felső behúzását 10 képpontra állítjuk.

H1 (margó-alsó: 24px; ) h2 (margó-felső: 24px; margó-alsó: 12px; ) p (margó-felső: 12px; )

Most a h2 címsor a h1 címsor vagy a bekezdés mögé tehető. Mindenesetre a felső margó nem haladhatja meg a 24 képpontot.

Általános szabályok

Összefoglalva szeretném felsorolni azokat a szabályokat, amelyeket a margók és a behúzások elrendezése során követek.

1. Ha a szomszédos elemek ugyanazzal a kitöltéssel rendelkeznek, akkor jobb, ha a szülőtárolóra állítja be őket, nem pedig az elemekre.
2. Az elemek közötti behúzásnál figyelembe kell venni, hogy az elem kötelező vagy nem kötelező.
3. A hasonló elemek listájához ne felejtse el, hogy az elemek száma változhat.
4. Ügyeljen a függőleges párnázásra, és használja ezt a funkciót ott, ahol előnyére válik.

Címkék: Címkék hozzáadása

Feladat

Távolítsa el a felsorolásjeles vagy számozott listák körüli párnázást.

Megoldás

Használja a margó és kitöltési stílus tulajdonságot null értékkel az UL vagy OL választóhoz, a lista típusától függően, az 1. példában látható módon.

1. példa: Lista behúzás

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

• Cseburaska
• Krokodil Gena
• Shapoklyak

---

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

Rizs. 1. Lista függőleges és vízszintes behúzások nélkül

Figyelje meg, hogy a weboldal bal szélén megjelenő listajelzők eltűnnek. Ha csak a felső és az alsó margót szeretné eltávolítani a lista balra mozgatása nélkül, használja a margó felső és alsó margó tulajdonságokat (2. példa).

2. példa: Lista behúzás

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

• Cseburaska
• Krokodil Gena
• Shapoklyak

---

Hivatkozáslistát tartalmazó blokk létrehozásakor általában javasolt a display tulajdonság használata a block vagy inline-block attribútumokkal együtt, ami növeli az aktív hivatkozásmező méretét. A nagy aktív linkmezők javítják az elemek használhatóságát, a nagy elemek könnyebben navigálhatók az egérrel.

Kijelzővel rendelkező elemek: blokk blokkelemként jeleníthető meg.

A display: inline-block elemet a rendszer olyan blokkelemként jeleníti meg, amely úgy körbeveszi a többi elemet, mintha inline lennének. A tartalom blokk elemként, maga az elem pedig soron belüliként van formázva.

Nézzünk egy egyszerű példát linklistával:

• Ezt a kicsit
• malacka odament
• piac

Ha nem változtatja meg a hivatkozások stílusát, akkor az aktív mezőik mérete megegyezik a bennük lévő szöveg méretével.

Ezen javíthatunk, ha az aktív mező méretét a szülőelem szélességére tesszük.

Ul a ( kijelző: blokk; )

Tudunk még jobbat is csinálni.

1. Győződjön meg arról, hogy a listaelemek nem tartalmaznak mezőket, ellentétben a hivatkozásokkal.
2. A hivatkozásoknak nincs margója, mert a margók nem az elemek aktív területei.

ul li ( kitöltés: 0; margó: 0; ) ul a ( kitöltés: 5 képpont; kijelző: blokk; )

A cikk magától értetődő dolgokból áll, de elég gyakran találhatunk linkblokkokat az interneten, amelyeket nem „csúsznak el” a kinagyított aktív mezők.

Eredeti cikk: Margók kihagyása a linklistákból Írta: Chris Coyier, 2010.11.29.

Az inline blokkok (inline-block) sok esetben nagyon kényelmes jelölőeszközt jelentenek. Használatuk példák a cikkekben találhatók.

Ugyanakkor egy buktató is társul hozzájuk. Még azt is mondanám, hogy egy egész macskakő. Akarod látni őt? Helyezzen el több soros elemet (vagy soron belüli blokkot) egy sorban.

Tegyük fel, hogy megvan ez a HTML:

• Storki.
• Éppen
• vonalak

Az elemek kisbetűs készítése:

Li( display:inline; )

...vagy sorblokkok:

Li( display:inline-block; /* A következő két sor az IE6-7-hez - egy soron belüli blokk viselkedését emulálja */ //display:inline; zoom:1; )

Probléma

A legtöbb böngésző behúzással választja el a soron belüli blokkokat (elemeket). A könnyebb érzékelhetőség kedvéért kicsit kiszíneztem a blokkokat.

Hoppá! Milyen bemélyedések? Én nem írtam fel ilyesmit!

Egyezzünk meg abban, hogy a továbbiakban egyszerűen „inline blokk”-ot írok, és „inline blokkot” ( :inline-block) vagy csak inline elemet (display:inline) fogok írni, mivel ezeknek teljesen gyakori problémájuk van, és azt is ugyanabban kezelik. út.

Kit kezelünk?

Tehát a soron belüli blokkok most rejtélyes bemélyedésekkel rendelkeznek. Természetesen ez nem csak a listákra vonatkozik. Egy sorban elhelyezkedő csoportok, például az „ov”, ugyanúgy viselkednek.

Az igazság kedvéért meg kell jegyezni, hogy az IE6 és IE7 az egészet behúzás nélkül jeleníti meg:

Így szeretném, ha minden böngésző megjelenne!

Nem megyünk bele annak a kérdésnek a részleteibe, hogy kinek van igaza és ki téved (értsd - ferdén támogatja a szabványokat), egyszerűen elérjük a böngészők közötti kompatibilitást. Nagyon kényelmes, ha a viselkedés kiszámítható - nem állítottam be behúzást, ami azt jelenti, hogy nem kell őket rajzolnom!

Valójában minden egyszerű - a behúzások eltávolításához meg kell értenie, honnan származnak!

Honnan származnak a bemélyedések?

És nem nehéz megérteni. Elég csak egy sorba írni a címkéket:

• Storki.
• Éppen
• vonalak

Csodák! A bemélyedések maguktól eltűntek! Következtetés: ezeket láthatatlan karakterek generálják a címkék között - elválasztás vagy szóköz.

Természetesen a „mindent egy sorra írni”, bár ez a probléma böngészők közötti megoldása, nyilvánvaló okokból (ki ír behúzás nélkül?) itt nem vesszük figyelembe. Más utakat keresünk.

Le a mélyedésekkel!

Mivel a behúzást a tárolóból származó karakterek hozzák létre, ésszerű ötlet lenne ezeket a karaktereket „semlegesíteni” – állítsa őket :0-ra; (a lényeg az, hogy ne felejtsük el, hogy ez a tulajdonság öröklődik, és maguknak a leszármazottaknak megszakítjuk):

Ul( font-size:0; ) li( font-size:14px; display:inline; )

Tökéletes megoldás! A vonalblokkok valóban egymáshoz nyomódnak. Továbbra is van egy kis kozmetikai probléma: egyes böngészőkben (például Opera 9.5 és régebbi) a szülőn belül felül vagy alul egy behúzás található (a képen látható szülő halvány szürkés-zöld színnel van kitöltve):

A képet felnagyítottuk, hogy a függőleges behúzások láthatóak legyenek

Ez a probléma hasonló a cikkben leírthoz, és megközelítőleg ugyanúgy kezeljük: add :0; (ismét ne felejtsd el átfedni a leszármazottat). Így kapjuk:

Ul( font-size:0; line-height:0; ) li( font-size:14px; line-height:normal; /* vagy más megfelelő érték */ display:inline; )

Most már minden rendben van? Nem úgy!

A baj onnan jött, ahonnan nem számítottunk rá

Úgy tűnik, ezeknek a mélyedéseknek tényleg ott kellene lenniük! Ennek alátámasztására két vaskalapos érv szól:

1. Az IE6-7 nem rajzolja meg őket;
2. Erőfeszítéseink ellenére a Webkit böngészők továbbra is felhívják őket.

Igen igen! Mind a Safari, mind a Chrome a fenti trükkök után arra törekedett, hogy három képpontról egyre csökkentsék a párnázást!

A makacs webkit nem akarja feladni!

Nick 2011.07.3-i frissítése. Az FF újabb rejtett meglepetést mutatott be. Ha méretezi az oldalt, néha egy további 1 képpontos kitöltés jelenik meg a tetején. Ez orvosolható a megjelenítési szabály hozzáadásával: -moz-inline-stack;

Végső döntés

A webkit :-1px használatával sikerült leküzdeni, de káros mellékhatásokat nem találtunk (kivéve persze, ha elfelejti felülírni a tulajdonságot a leszármazottaknál).

Végső CSS böngészők közötti megoldással a beágyazott elemekhez:

Ul( font-size:0; /* vízszintes térköz eltávolítása */ sormagasság:0; /* ...és függőleges egyes böngészőkben */ letter-spacing:-1px; /* meggyőzi a webkit */ ) li ( font -size:14px; /* Ne felejtse el visszaállítani a normál értékeket*/ line-height:normal; letter-space-space:normal; display:inline; )

Soron belüli blokkok esetén:

Ul( font-size:0; /* vízszintes térköz eltávolítása */ sormagasság:0; /* ...és függőleges egyes böngészőkben */ letter-spacing:-1px; /* meggyőzi a webkit */ ) li ( font -size:14px; /* Ne felejtse el visszaállítani a normál értékeket */ line-height:normal; letter-space-space:normal; display: -moz-inline-stack!important; display:inline-block; // kijelző:inline ; zoom:1; )

Ne felejtse el, hogy a zoom tulajdonság érvénytelen. Ezért harci körülmények között tedd egy külön CSS-be, csatlakoztasd a segítségével.