Popis

Vlastnosť CSS margin-top nastavuje vypchávky v hornej časti prvku. Polstrovanie je vzdialenosť od vonkajšieho okraja horného okraja aktuálneho prvku k jeho vnútornému okraju. rodičovský prvok alebo k hranici prvku nad ním. Upozorňujeme, že pre vložené prvky (zobrazenie: vložené;) je možné nastaviť iba vypchávky na ľavej a pravej strane.

Veľkosť vonkajšieho horného polstrovania je možné zadať v pixeloch (px), percentách (%) alebo v iných jednotkách CSS. Hodnota môže byť kladná alebo záporná.

Poznámka: Spodné alebo horné vypchávky dieťaťa môžu ovplyvniť celkovú výšku rodiča, ak nemá pevnú veľkosť.

Kombinácia polí

1. Polia súrodencov, umiestnené pod sebou a nachádzajúce sa v toku dokumentov, sú zlúčené do jedného spoločného. Výška výsledného okraja sa rovná výške väčšieho z dvoch okrajov, napríklad: okraj horného prvku (spodný okraj) je 10 pixelov a spodného prvku (horný okraj) je 20 pixelov, jedna marža v tomto prípade bude vysoká 20 pixelov.
2. Okraje rodiča a dieťaťa, ktoré sú v toku dokumentov, sa zlúčia, ak rodič nemá nič, čo by oddeľovalo jeho vonkajšie vypchávky od vonkajšieho vypchávania dieťaťa (orámovanie, vypchávky alebo vložený obsah). Polia sa tiež nezlúčia, ak je vlastnosť pretečenia v nadradenom prvku nastavená na skrytú alebo automatickú. Výhodou tejto metódy je, že veľkosť rodičovského prvku sa nezvyšuje.

V tomto článku by som vám rád povedal, ako správne zariadiť polia(polstrovanie) a odsadenie(marža) v CSS.

V prvom rade si spomeňme na definíciu okrajov a polstrovania podľa špecifikácie W3C. V boxovom modeli sú okraje vzdialenosť medzi obsahom a okrajom. A vypchávka je vzdialenosť medzi okrajom bloku a okrajom susedného alebo nadradeného prvku.

Ak teda nie je nastavený okraj a pozadie prvku, potom nie je žiadny rozdiel, na nastavenie odsadenia použite vlastnosť vypchávky alebo okraja, ale za predpokladu, že šírka (šírka) a výška (výška) prvku nie sú nastavené. a algoritmus na výpočet veľkosti obsahu pomocou vlastností box-size.

V každom prípade majte na pamäti, že okraje môžu byť zahrnuté do šírky alebo výšky prvku, alebo nie. Okraje sú vždy nastavené mimo prvok.

Teraz sa pozrime na to, ako správne umiestniť okraje a vypchávky medzi prvky. Ako príklad si vezmite nasledujúci blok.

Toto sú správy z bloku správ. Skladá sa z nadpisu, zoznamu správ a odkazu „Viac noviniek“. Dajme im nasledujúce názvy tried: news__title, news__list a news__more-link.

Pretože každý z týchto prvkov má rovnaké ľavé a pravé okraje, je lepšie nastaviť okraje pre nadradený blok, než nastaviť ľavé a pravé okraje pre každý prvok zvlášť.

Správy (polstrovanie: 20 pixelov 25 pixelov;)

Ak je teda potrebné zmeniť hodnotu polí vpravo a vľavo, bude to potrebné urobiť Na jednom mieste... A keď do bloku správ pridáte nový prvok, už bude mať potrebné zarážky vľavo a vpravo.

Často sa stáva, že všetky prvky v bloku majú rovnaký ľavý a pravý okraj, okrem jedného, ​​ktorý by napríklad nemal byť kvôli pozadiu vôbec odsadený. V tomto prípade môžete pre prvok nastaviť záporné okraje. Potom nemusíte odstraňovať okraje vo vnútri bloku pre ostatné prvky.

Teraz musíme nastaviť vertikálne medzery medzi prvkami. Za týmto účelom určte, ktorý z prvkov je povinné... Spravodajský blok nemôže existovať bez zoznamu správ, zároveň nemusí existovať odkaz „Iné správy“, nadpis je možné tiež odstrániť, napríklad pri zmene dizajnu.

Keď to vezmeme do úvahy, v spodnej časti nastavíme zarážku názvu a v hornej časti zarážku odkazu „Ostatné správy“.

News__title (bottom-margin: 10px;) .news__more-link (margin-top: 12px;)

Rovnaký externý efekt by sme mohli dosiahnuť pridaním horného a dolného polstrovania pre zoznam správ.

Zoznam noviniek__ (okraj: 10 pixelov 0 12 pixelov 0;)

Teraz musíte nastaviť zarážky medzi jednotlivými správami. Opäť majte na pamäti, že počet noviniek sa môže meniť a v zozname môže byť iba jedna novinka.

Môžete nastaviť pre každú správu okrem prvej zarážky hore alebo pre každú správu okrem poslednej zarážky v spodnej časti. Uprednostňuje sa prvá možnosť, pretože: pseudo-selektor prvého dieťaťa bol pridaný do špecifikácie CSS 2.1 a má širšiu podporu ako pseudo-selektor: posledné dieťa, ktorý bol pridaný iba do špecifikácie CSS 3.0.

News__list-item (margin-top: 18px;) .news__list-item: first-child (margin-top: 0;)

Preto správne umiestnenie okraje a zarážky vám umožňujú flexibilnú zmenu vzhľad akýkoľvek blok bez zmeny štýlov a bez porušenia dizajnu. Najdôležitejšie je určiť, ktoré prvky bloku sú hlavné ( povinné), a ktoré voliteľné.

Niekedy sa nemôžeme spoliehať na požadované prvky. Máme napríklad vyskakovacie okno, v ktorom je možné zobraziť nejaký názov a text. Navyše v niektorých prípadoch nemusí byť žiadny text a v niektorých prípadoch nemusí byť názov. To znamená, že oba prvky sú voliteľné.

V takom prípade môžete na zarážky použiť nasledujúci spôsob.

Popup__header + .popup__text (horný okraj: 15 pixelov;)

Potom sa odsadenie zobrazí iba vtedy, ak budú použité oba prvky. V prípade zobrazenia iba nadpisu alebo iba textu nebude existovať žiadne extra odsadenie.

Zbaliť zvislé polstrovanie

Ďalšia nuansa, o ktorej nie každý vie, je spojená so zvislými zarážkami medzi susednými blokmi. V definícii odsadenia, ktorú som uviedol vyššie, sa uvádza, že odsadenie je vzdialenosť medzi nimi hranice súčasný a priľahlý blok. Ak teda umiestnime dva bloky pod seba a jednému z nich dáme dolný okraj 30 pixelov a druhému hornému okraju 20 pixelov, okraj medzi nimi nebude 50 pixelov, ale 30 pixelov.

To znamená, že sa budú prekrývať zarážky a zarážka medzi blokmi sa bude rovnať najväčšej zarážke, a nie súčtom zarážok. Tento efekt sa nazýva aj „kolaps“.

Upozorňujeme, že horizontálne zarážky, na rozdiel od vertikálnych, sa nezrútia, ale sú zhrnuté. Sumarizujú sa aj polia (vypchávky).

Keď vieme o „zrútenom“ polstrovaní, môžeme túto funkciu využiť vo svoj prospech. Ak napríklad potrebujeme do článku vložiť zarážky pre nadpisy a text, potom pre nadpis prvej úrovne nastavíme odsadenie v spodnej časti na 20 pixelov a pre nadpis druhej úrovne v hornej časti 20 pixelov a v dolnej časti 10 pixelov a pre všetky odseky nastavíme odsadenie v hornej časti 10 pixelov.

H1 (spodný okraj: 24 pixelov;) h2 (horný okraj: 24 pixelov; dolný okraj: 12 pixelov;) p (horný okraj: 12 pixelov;)

Teraz môže byť nadpis h2 umiestnený buď za nadpis h1, alebo za odsek. V každom prípade horný okraj nepresiahne 24 pixelov.

Všeobecné pravidlá

Aby som to zhrnul, rád by som uviedol zoznam pravidiel, ktoré dodržujem pri zaraďovaní okrajov a čalúnení.

1. Ak susedné prvky majú rovnaké polstrovanie, je lepšie ich nastaviť na nadradený kontajner, a nie na prvky.
2. Pri nastavovaní medzier medzi prvkami by ste mali vziať do úvahy, či ide o povinný prvok alebo voliteľný prvok.
3. Zoznam prvkov rovnakého typu - nezabudnite, že počet prvkov sa môže líšiť.
4. Uvedomte si zvislé vypchávky a používajte túto funkciu tam, kde je to užitočné.

Anya napísala nasledujúci kód (príklad 1) a získala stránku zobrazenú na obr. 1. Ale Anya nepotrebuje žiadne zarážky medzi blokmi, rovnako ako napravo a naľavo od blokov. Aké zmeny v kóde sú na to potrebné?

Medzi nadpisom a hlavným textom je príliš veľa odsadenia. Ako ho môžem zmenšiť?

Na odsek (tag

) a názov (tag

) automaticky pridá horné a dolné vypchávky, ktoré sa spoja, aby poskytli veľké medzery medzi nadpisom a textom. Aby ste znížili množstvo vypchávky, musíte do selektora H1 explicitne pridať vlastnosť okrajového dna. Okrem toho môžete nastaviť kladnú, nulovú alebo zápornú hodnotu. Týmto spôsobom je ľahké nastaviť požadovanú hodnotu odsadenia.

Ako môžem odsadiť prvý riadok pre každý odsek?

Keď potrebujete nastaviť odsadenie odseku, je najlepšie použiť vlastnosť štýlu text-odsadenie. Jeho hodnota určuje, o koľko sa má text v prvom riadku posunúť napravo od jeho pôvodnej polohy. V tomto prípade sa šírka textového bloku nemení a zostáva pôvodne nastavená. Veľkosť odsadenia môže byť špecifikovaná v pixeloch, percentách alebo iných dostupných jednotkách (príklad 1).

Ako odstrániť horné a dolné odsadenie zo zoznamu?

V závislosti od typu zoznamu použite vlastnosti štýlu margin-top a margin-bottom pre volič UL alebo OL. Môžete tiež použiť generickú vlastnosť marže.

Ako zmením odsadenie na webovej stránke?

Polstrovanie na webovej stránke, aj keď nie je viditeľné, neumožňuje, aby sa obsah tesne dotýkal okrajov okna prehliadača a zaistil tak pohodlné čítanie. Svoj vlastný okraj môžete nastaviť zmenou vlastnosti okraja voliča tela.

Ako odstránim vypchávky okolo formulára?

Pri pridávaní formulára prostredníctvom značky

okolo neho sa v hornej a spodnej časti automaticky pridá vypchávka. Ak ich chcete odstrániť, použite vlastnosť s nullable margin style pridaním do selektora FORM.

Ako zmením medzery medzi odsekmi textu?

Pri použití značky

Odsadenie sa automaticky pridá do hornej a dolnej časti odseku textu. To sa robí za účelom vizuálneho oddelenia jedného bloku textu od druhého. Je zrejmé, že predvolené hodnoty odsadenia nie sú vždy uspokojivé, takže niekedy musia byť znížené alebo zvýšené. Na to môžete použiť univerzálny okraj vlastností, ktorý definuje zarážky na všetkých stranách odseku, alebo horný okraj pre hornú zarážku a dolný okraj pre dolnú zarážku.

Dnes sa s vami trochu porozprávame o zásadách rozloženia, konkrétne o tom, ako zorganizovať odsadenie určitých prvkov na vašom webe.

Príslušným prvkom, ktorý má byť odsadený, môže byť text, obrázok, tabuľka alebo akýkoľvek iný prvok HTML. Hlavnou vecou je dodržať niekoľko dôležitých pravidiel, o ktorých vám teraz poviem.

Ak práve vytvárate svoje webové stránky, odporúčam vám vložiť nasledujúce vlastnosti do hornej časti hlavného hárka štýlov:

*(-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;) *: before, *: after (-webkit-box-sizing: border- box; -moz-box-size: border-box; box-size: border-box;)

Pýtate sa, prečo to potrebujete? Na vašu otázku odpovedám názorným príkladom.

Povedzme, že máte takýto prvok rozloženia:

Ahoj svet!

Takto bude táto možnosť vyzerať bez použitia vyššie popísaných vlastností (horný prvok) a ich použitia (spodný prvok):

Čo tu môžete vidieť? Že šírka prvku v prvej verzii (bez použitia vlastností) sa vďaka pridanému polstrovaniu stala väčšou ako je zadaná, čo nie je úplne pohodlné a správne z hľadiska rozloženia.

Možnosť s vlastnosťami je oveľa estetickejšia, ale stojí za to ju používať vedome, pretože keď ich pridáte na hotové stránky, riskujete, že dostanete zlý dizajn a „bolesť hlavy“ v podobe uvedenia tohto všetkého do poriadku. forma. Všetky projekty, ktoré som mal možnosť viesť od nuly, neboli bez týchto vlastností.

A teraz sa v skutočnosti porozprávajme o možnostiach organizácie odsadenia prvkov na vašom webe s názornými príkladmi.

Polstrovanie s vlastnosťou „padding“ CSS

Aby ste pochopili celú logiku vecí, vezmime si ako príklad nasledujúci úryvok rozloženia:

Ahoj svet!

Ahoj svet!

s ich štýlmi:

Test_div (šírka: 250 pixelov; orámovanie: 1 pixel plná;)

Vizuálna verzia je nasledovná:

Čo je to majetok " vypchávka"? Pomáha organizovať vypchávky na určených prvkoch. Pridajme do nášho rozloženia 10px výplň:

Test_div (šírka: 250 pixelov; orámovanie: 1 pixel plný; výplň: 10 pixelov; // výplň 10 pixelov)

Vizuálne to vyzerá takto:

Číslo 10 vo vlastnosti znamená, že do zadaných prvkov na každej z ich štyroch strán je potrebné pridať výplň 10 pixelov. Pixely (px) je možné nahradiť percentami alebo inými podporovanými hodnotami CSS.

Celkovo existujú dve možnostiúdaje o stranách, z ktorých sa má odsadiť.

najprv- toto je s výslovným uvedením strán:

Výplň: 10px; // 10px odsadenie hore padding-right: 10px; // 10px polstrovanie vpravo dole padding: 10px; // Dolné polstrovanie 10 pixelov padding-left: 10px; // 10px polstrovanie vľavo

V tomto prípade každá strana používa svoj vlastný majetok. A druhý:

Polstrovanie: 10 pixelov 0 0 0; // 10px vypchávky navrchu, všetko ostatné je 0px vypchávky: 10px 0; // 10px horné a spodné vypchávky a 0px polstrovanie na bočných výplniach: 0 10px; // 0px vypchávky hore a dole a 10px po stranách

Tu prichádza jednoduchý zoznam hodnôt, z ktorých každá zodpovedá svojej vlastnej strane. Boky sú nastavené takto: prvá hodnota je horná, druhá je správna, tretia je dolná a štvrtá je vľavo, to znamená, že všetko je v smere hodinových ručičiek.

Ak existujú dve hodnoty (hore a vpravo), potom to znamená, že zrkadlové hodnoty rovnakých hodnôt idú nadol a doľava a iba tak. Zdá sa, že je všetko jasné. Ak pre niektoré strany nepotrebujete nastaviť odsadenie, nastavte hodnotu pre túto stranu na „0“. Táto možnosť sa mi páči viac, pretože je kompaktnejšia, ale vo svojom úsilí som použil prvú možnosť.

Tento typ odsadenia je vhodný na oddelenie textu, obsahu buniek tabuľky a ďalších textových informácií. Na oddelenie samotných prvkov, podobných tým, ktoré sú v príklade vyššie, existuje ešte jedna vlastnosť.

Polstrovanie s vlastnosťou „margin“ CSS

Charakteristický rys nehnuteľnosti " marža„Je to, čo je vypchávka pridaná mimo prvok, to znamená externé.

Tu sú tiež dve možnosti pridania.

najprv- s výslovným uvedením strany:

Horný okraj: 10 pixelov; // 10px odsadenie z pravého horného okraja: 10px; // 10px okraj na pravom dolnom okraji: 10px; // Dolné vypchávky 10 pixlov okraj-vľavo: 10 pixelov; // 10px polstrovanie vľavo

Druhý- s vymenovaním hodnôt, z ktorých každá zodpovedá svojej vlastnej stránke:

Okraj: 10 pixelov 0 0 0; // 10px horný okraj, všetko ostatné je 0px okraj: 10px 0; // 10px vypchávky hore a dole a 0px na bočnom okraji: 0 10px; // Vonkajšie polstrovanie je 0px hore a dole a 10px na bokoch

Nebudem tu popisovať všetky nuansy práce s pravidlami, všetko je rovnaké ako o majetku “ vypchávka», Píše sa o tom vyššie.

Používame maržu s nasledujúcou hodnotou:

Test_div (šírka: 250 pixelov; orámovanie: 1 pixel plný; okraj: 10 pixelov; // výplň 10 pixelov)

Vizuálne to bude vyzerať takto:

Ako vidíte na príklade, v tomto prípade je pridané vonkajšie polstrovanie oddeľujúce označené prvky.

Dôležitá funkcia: Ak ste sa pozorne pozreli na výsledok, mohli ste si všimnúť, že susedné polstrovanie prvkov nie je zhrnuté. To znamená, že ak má prvý prvok vonkajšiu spodnú výplň 10 pixelov a druhý má vonkajšiu vrchnú výplň s rovnakou hodnotou, celková vzdialenosť medzi nimi bude tiež 10 pixelov. Ak je 10 a 15, potom je celkový počet 15 atď.

Tento typ odsadenia sa často používa v texte, a to pri navrhovaní odsekov, ako aj v prvkoch s viditeľnými okrajmi.

Ale obe vlastnosti sa neobmedzujú iba na tieto prvky. Vyberáte si možnosti ich použitia, ja som sa len pokúsil dať vám o nich základ.