Css könyvtár

előző ◈ a következő

A CSS margó tulajdonságot arra használjuk, hogy meghatározzuk az elem körüli külső üres mező mezők méretét, amelyek a határ határán kívül esnek. A belső párnázattal ellentétben a mezők színe mindig áttetsző, így a környező környezet háttérképe rajtuk át.

Az elem - margó külső mezőinek helye

Css könyvtár

Néha az elemek külső területei egyesülhetnek. Ennek eredményeképpen egyetlen mező alakul ki közöttük, és annak mérete megegyezik a margóelem értékével, amiért nagyobb. Ehhez az elemeknek egymás után kell menniük a HTML kódban, vagy be kell ágyazniuk egymásba, és mezők egymás mellett állnak. Ez azt jelenti, hogy a mezők között nem lehet üres elemek, belső behúzók vagy keretek, azaz nem kell őket határolni.

Tegyük fel, hogy a következő példában a címke felső mezője

összeolvad az első szakasz alsó mezőjével és a második bekezdés felső mezőjével. Ennek eredményeként egy olyan mezőt kapsz, amely az elemek között a legnagyobb margóértéknek felel meg. És ha például,
akkor lesz keret vagy belső behúzás, akkor a második bekezdés felső mezője nem lesz képes egyesülni.

A mezők összevonására bizonyos szabályok vannak:

  1. Az elemek oldalirányú (vízszintes) mezői soha nem olvadnak össze.
  2. Tagmezők soha ne keveredjen.
  3. Az inline elemek mezői nem egyesülnek.
  4. Az úszó elemek (úszó) mezeje nem egyesül.
  5. Az abszolút pozícionált elemek (pozíció) mezeje nem egyesül.
  6. Az elemek felső és alsó (függőleges) mezeje a túlcsordulással megegyezik a rejtett értékekkel. a görgetés vagy az automatikus nem egyesül, de csak a gyermekek mezőivel.
  7. A blokk elemek függőleges mezői szomszédosak a HTML-kód egyesítésében (mint a példában).

Egy elem egy másik elem gyermeke, ha az a fészek első szintjén belül van.

Tulajdonság típusa

A margin tulajdonság értéke az örökölt kulcsszó vagy a külső mezők méretének jelzése az elem mindegyik oldalán.

  • Méret - távolság relatív vagy abszolút egységekben kapott CSS, például pixel (képpont), pont (pt), centiméter (cm), stb Negatív értékek megengedettek.
  • Percentages - százalékos arány (%), ahol 100% az õselem szélessége a következõ algoritmussal:
    1. A nepozitsioniruemyh és viszonylag pozicionált elemek (helyzetbe. Statikus vagy relatív) mező számítás legközelebb képest a szélessége a blokk (blokk) -ancestor elem beágyazott blokk (inline-block), vagy asztalra sejt, és ha nincs, akkor a szélessége a test a dokumentum ( ).
    2. A dokumentum testének mezőinek százalékos mérete maga a root elem szélességéhez viszonyítva ( ).
    3. Pozícióba kerülő elemek esetén. a rögzített mezők a böngészőablak szélességéhez viszonyítva tekinthetők.
    4. Pozícióba kerülő elemek esetén. az abszolút mezők a helymeghatározás elemének szélességétől függnek, figyelembe véve a belső párnázatát, és ha nincs ilyen elem, akkor a böngészőablak szélessége.
    Lehetőség van negatív százalékértékek meghatározására.
  • auto - a mezők méretét a böngésző automatikusan kiszámítja az elem körüli rendelkezésre álló hely alapján.
  • inherit - örökli a margót a szülőelemből.

Százalék: az őselem szélességéhez vagy a böngészőablakhoz képest.

Alapértelmezett érték: a specifikáció nulla (0) értéket ad meg, de valójában néhány HTML elem esetében a böngészők kezdetben meghatározott méretű mezőket állítottak be. Például a bekezdéseknek nem nulla mezők vannak a tetején és alján.

A margótulajdonságnak négy-négy (szóközzel elválasztva) értéke lehet, míg ezeket a szabályokat tiszteletben tartják:

  1. Egy érték - az elem külső mezőinek mérete minden oldalról azonos lesz.
  2. Két érték - az első a felső és alsó, a második pedig az elem bal és jobb margóját határozza meg.
  3. Három érték - az első a felső mező méretét, a második - a bal és a jobb oldalt, valamint a harmadik - az elem alsó mezőjét jelöli.
  4. Négy érték - a felső és az óramutató járásával megegyező irányban: a felső, a jobb, az alsó, a bal margó esetében.

margin: [méret | érdeklődés auto] | örököl

CSS példa: margin használata

Az eredmény. A CSS margó tulajdonság használata.

Css könyvtár

Ebben a példában a böngésző kiszámította a DIV1 blokk oldalsó margóit a rendelkezésre álló oldalméret alapján, így a mező középre van állítva.

Függőleges mező között létrejött blokkokat, így közötti DIV1 és DIV2 mező 10px között, valamint DIV2 és DIV3 - 20px.

CSS verziók

Az Internet Explorer 6.0 és a 7.0 nem érti az örökölt értéket, és egyes esetekben hibásan kezeli az abszolút elhelyezett elemek mezőit, amikor az automatikus értéket használja.

Emellett IE 6.0 helytelenül számítja a százalékos függőleges mezők, és mindig páros határértéket a pop-up elem, de csak azon az oldalon, amely az elem és a szülői egység. Ezt a hibát a lebegő elem megjelenítéséhez lehet korrigálni: inline.

  • Hogyan készítsünk egy weboldalt
    Magának és ingyen
  • HTML oktatóanyag
    Kezdőknek
  • CSS bemutató
    Kezdőknek
  • Irodalom
    HTML és CSS segítségével
  • példák
    HTML és CSS
  • referenciák
    Hasznos weboldalak a webmestereknek
  • szerszámok
    Webhelyek létrehozására szolgáló programok

CSS betűrendben

CSS cél szerint

Kapcsolódó cikkek

előző ◈ a következő