Vzdialenosti okraja a výplne sú špecifikované v . Okraje a výplne CSS: rozdiel medzi vlastnosťami okrajov a výplní. Odsadenie je nastavené na posledný možný prvok v dome

Hneď vám poviem, že toto je veľmi dôležitá lekcia. Po jeho preštudovaní budete vedieť usporiadať prvky na stránke, nastaviť medzi nimi odsadenia, vytvoriť ich v samostatnom špecifickom bloku, nastaviť okraje.

vypchávka

Padding je vlastnosť, ktorá nastavuje mieru odsadenia prvku od vnútorného okraja okraja k obsahu. Obsahom môže byť obyčajný text, obrázok alebo podradený prvok, ktorý môže mať aj svoje vlastné okraje.

Jednotky môžu byť pixely (px) alebo percentá (%).

#blok(
výplň: 12px /* odsadenie od okrajov bloku k obsahu - na všetkých stranách bude 12 pixelov */
}

Pole je možné zadať iba na jednej konkrétnej strane:

vypchávka top- vlastnosť, ktorá vytvára okraje navrchu.
čalúnenie vpravo- vlastnosť, ktorá vytvára polia vpravo.
vypchávka-dolná- vlastnosť, ktorá vytvára spodné okraje.
polstrovanie-vľavo- vlastnosť, ktorá vytvára okraje vľavo.

#blok(
padding-bottom: 25px /* spodný okraj 25px */
padding-left: 15px; /* ľavý okraj 15px */
}

Ako ste si všimli, ak takto zadáte polia z 2 alebo 3 strán, dostanete dlhý kód. Pre vlastnosť výplne existuje skrátený zápis. Všetky 4 hodnoty sú v ňom uvedené postupne - od každého okraja v jednom riadku sa pohyb pohybuje v smere hodinových ručičiek, začínajúc zhora:

Polstrovanie: Horné čalúnenie vpravo Polstrovanie Spodné čalúnenie vľavo;

#blok(
padding: 25px 10px 15px 6px; /* hore 25px, vpravo 10px, dole 15px, vľavo 6px */
}

marža

Vlastnosť margin, na rozdiel od paddingu, nastavuje veľkosť paddingu medzi okrajmi prvkov.
Ak je prvok potomkom, potom výplň predstavuje priestor od okraja prvku po vnútorný okraj okraja rodiča.
Ak prvok nemá rodiča, potom sa za odsadenie považuje voľný priestor nastavený vlastnosťou k okrajom okraja okolitých prvkov.

#blok(
okraj: 4px
}

Ak chcete zadať zarážky iba na určitých stranách, existujú nasledujúce vlastnosti:

margin-top- vlastnosť, ktorá vytvára zárezy zhora.
okraj-pravý- vlastnosť, ktorá vytvára zárezy vpravo.
okraj-dole- vlastnosť, ktorá vytvára zárezy zospodu.
ľavý okraj- vlastnosť, ktorá vytvára zarážky vľavo.

Rovnako ako vlastnosť padding, margin má tiež schopnosť skrátene hodnoty pre rôzne strany. Pohyb prebieha v smere hodinových ručičiek od horného okraja:

Okraj: Horný okraj vpravo Okraj Dolný okraj vľavo;

#blok(
okraj: 15px 10px 5px 25px; /* hore 15px, vpravo 10px, dole 5px, vľavo 25px */
}

Ďakujem za tvoju pozornosť!

Zdroj: okraj alebo výplň?
Filip Šporer.
preklad: vl49.

Kedy je lepšie použiť okraje na účely formátovania a kedy výplň a záleží na tom?

Veľmi dlho som sa snažil nájsť vhodné odpovede. A až po napísaní množstva hrozného, ​​nečitateľného kódu CSS, sprevádzaného rôznymi vedľajšími účinkami, som mohol s istotou povedať, že som našiel základné pevné pravidlá týkajúce sa vyššie uvedených problémov.

Pre lepšiu prehľadnosť sa vráťme k typickej situácii, ktorú v roku 2017 pravdepodobne pozná každý vývojár používateľského rozhrania. Máme najjednoduchšiu šablónu karty.

V tomto príklade možno rozlíšiť dva typy intervalov:

Tu je veľmi dôležité pochopiť, že máme do činenia s dvoma odlišnými pojmami, ktoré by pri prepájaní nemali byť prepojené. To znamená, že ak potrebujem zmeniť vzdialenosť medzi kartami a ich obalom, napríklad do 24 pixelov, tak by to nemalo nijako ovplyvniť rozostupy medzi kartami samotnými.

Implementujete príklad pomocou CSS?

Existujú doslova tisíce spôsobov, ako vytvoriť takúto šablónu pomocou okrajov a paddingu, no ja by som vám rád predstavil jeden z nich, ktorý demonštruje správne použitie vlastností margin a padding. Okrem toho vám táto metóda umožňuje pridať ďalšie karty neskôr.

Kontajner(
výplň: 16px
}
.karta + .karta(
okraj: 0 0 0 8px;
}

Len 2 selektory a 2 pravidlá.

Akú funkciu má znamienko plus?

Symbol + predstavuje susedný volič. Ukazuje iba na prvok bezprostredne nasledujúci za prvkom zadaným pred týmto selektorom.

Ako môžete vidieť na obrázku vyššie, v našom prípade bude tento selektor vyberať každej karte predchádza každá druhá karta. So susedným voličom teda môžeme nastaviť ľavý okraj pre každú kartu okrem prvej.

To znamená, že máme možnosť pridať ľubovoľný počet kariet, ktoré potrebujeme, pričom vzdialenosť medzi nimi bude vždy osem pixelov.

Všetko funguje dobre, kým nepotrebujeme priložiť ku kartám niečo iné ako kartu. No, povedzme tlačidlo "Pridať kartu" ("Pridať kartu"):

Na základe úryvku CSS, ktorý už máme, by sme zrejme novému prvku, ktorý predstavuje tlačidlo, nepriradili triedu .card, keďže nejde o kartu. Ako byť? Oplatí sa vytvoriť dodatočný názov triedy .add-card , ktorý obsahuje rovnaké pravidlo s vlastnosťou margin ako trieda .card? Nie, existuje lepšie riešenie.

Lobotomizovaná sova **+* .

A ako to vyzerá. Napriek vtipnej asociácii táto metóda funguje skvele a odkedy som sa o nej dozvedela, používam ju neustále. Takže, na čo to všetko je? Tu je pohľad na príslušný kód CSS:

Kontajner(
výplň: 16px
}
/* No, spoznali ste lobotomizovanú sovu? */
.container > * + * (
okraj: 0 0 0 8px;
}

Ako si iste pamätáte, predchádzajúci selektor sa použil na akúkoľvek kartu, ktorej predchádzala iná karta. Teraz s jeho pomocou môžeme formátovať každému prvku bezprostredne predchádza akýkoľvek iný prvok, samozrejme vrátane tlačidla.

Nakoniec.

Úprimne dúfam, že vám tu prezentovaný materiál pomohol zistiť, kedy použiť výplň na oddelenie obsahu v kontajneri a kedy použiť okraje.

Na záver by som vám rád predložil na zváženie projekt pera, ktorý demonštruje vyššie uvedené príklady, ako aj dve pravidlá, ktoré boli overené mojou vlastnou skúsenosťou. Takže používame:

vypchávka- pre medzery medzi nádobou a jej obsahom.

marža- pre medzery medzi prvkami vo vnútri nádoby.

Zobrazenia príspevku: 427

Popis

Nastavuje hodnotu okrajov okolo obsahu prvku. Okraj je vzdialenosť od vnútorného okraja rámu prvku k pomyselnému obdĺžniku, ktorý ohraničuje jeho obsah (obrázok 1).

Vlastnosť padding umožňuje nastaviť hodnotu paddingu pre všetky strany prvku naraz, alebo ju definovať len pre zadané strany.

Syntax

výplň: [hodnota | percent] (1, 4) | dediť

hodnoty

Je povolené použiť jednu, dve, tri alebo štyri hodnoty, pričom ich oddelíte medzerou. Účinok závisí od počtu hodnôt a je uvedený v tabuľke. jeden.

Okraje možno zadať v pixeloch (px), percentách (%) alebo iných jednotkách vhodných pre CSS. Hodnota zdediť znamená, že je zdedená od rodiča. Pri zadávaní okraja v percentách sa hodnota vypočíta zo šírky rodiča prvku.

HTML5 CSS2.1 IE Cr Op Sa Fx

Výsledok tohto príkladu je znázornený na obr. 2.

Ryža. 2. Použitie vlastnosti výplne

Objektový model

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

Prehliadače

Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.

Shastaya na fórach narazil na skutočnosť, že stále vyvstáva otázka, čo robí vypchávka, a čo marža a ake su medzi nimi rozdiely. Preto som sa rozhodol to pripomenúť. Takže bez toho, aby sme sa uchýlili k nejasným frázam, položme si úlohu a analyzujme príklad, na ktorom bude všetko jasné.

Úloha: Na stránke potrebujete červený blok(200 x 200 pixelov), ktoré ustupuje od okrajov prehliadača hore a vľavo o 40 a 70 pixelov a text, vo vnútri ktorého je odsadenie zľava a zhora o 40 pixelov.

rozhodnutie: pozrite sa na obrázok a kód. Náš červený blok by nemal presiahnuť 200 x 200 pixelov a mal by byť vyplnený od okrajov prehliadača (alebo iných blokov obsahu). V skutočnosti robíme tieto zarážky cez okraj. Ak urobíme výplň, výplň sa uskutoční vo vnútri nášho červeného bloku a výplň sa získa s pozadím samotného bloku (tj červeným).

Okrem použitých vlastností (riadky 6-9) existujú aj vlastnosti margin-right, padding-right, margin-bottom, padding-bottom - sú pre odsadenie vpravo a dole. Hodnoty všetkých týchto vlastností môžu byť v pixeloch (px), percentách (%) alebo v jednotkách em.

V podstate je to tak. Existuje však niekoľko ďalších funkcií práce s nimi.

Vlastnosti okraja a vypchávky

Pri použití výplne sa rozmery výplne musia odpočítať od výšky a šírky bloku, inak sa veľkosť bloku zväčší o veľkosť výplne.

Ak nastavíte margin-left a margin-right s automatickými hodnotami pre nejaký blok, potom ak má blok pevnú šírku (napríklad 400px) a nie je tam žiadna vlastnosť float CSS, potom bude tento blok zarovnaný na stred prvok, v ktorom sa nachádza. V skutočnosti sa táto metóda zarovnania zvyčajne používa pre negumové usporiadanie so zarovnaním na stred. Aj keď IE 5.5 a staršie nepodporujú automatickú hodnotu, stále vám to nebráni v jej neustálom používaní =).

Neodporúča sa používať výplň a okraj v tabuľkách, pretože efekt bude v rôznych prehliadačoch nepredvídateľný.

A posledná vec, ktorú som chcel povedať. Nezabudnite použiť skratkové konštrukcie príspevkov ako margin: 10px 0 5px 20px;. Ak je zarážka nula, môžete jednoducho zadať nulu bez zadávania parametrov. Je veľmi ľahké si zapamätať, ktorý z parametrov patrí ku ktorej hranici - pre blok idú odsadenia v smere hodinových ručičiek: prvé číslo je navrchu, druhé je vpravo, tretie je dole, štvrté je na vľavo.

To je vlastne všetko, čo som vám dnes chcel povedať. Pekný víkend všetkým!

Vlastnosť CSS výplne je zodpovedná za nastavenie výplne vo vnútri prvku od jeho okraja.

Výplň syntaxe CSS

výplň: vpravo hore dole vľavo;

• top - odsadenie od horného okraja prvku;
• vpravo - odsadenie od pravého okraja prvku;
• spodok - odsadenie od spodného okraja prvku;
• vľavo - odsadenie od ľavého okraja prvku;

Hodnoty sa najčastejšie uvádzajú v pixeloch. Povolené sú aj percentá a iné prijateľné jednotky CSS.

Poznámka 1
Povolené sú viac ako štyri hodnoty. V závislosti od počtu hodnôt sa budú akcie líšiť:

• Ak sú uvedené 3 hodnoty, potom prvá hodnota nastavuje zarážku zhora, druhá - vľavo aj vpravo a tretia - spodná
• Ak sú uvedené 2 hodnoty, potom prvá hodnota nastavuje odsadenie zhora a zdola, druhá - vľavo a vpravo od obsahu
• Ak je nastavená hodnota 1, potom sa odsadenie nastaví na rovnaké odsadenie pre všetky strany. Napríklad:

padding : 10px 10px 10px 10px ; Môžete to nastaviť kompaktnejšie: výplň: 10px

Poznámka 2
Na rozdiel od vlastnosti okraja CSS nie sú povolené záporné hodnoty výplne.

Výplň má tiež 4 samostatné vlastnosti CSS. Každý z nich je zodpovedný za nejaký smer.

• padding-left - odsadenie od ľavého okraja prvku;
• padding-right - odsadenie od pravého okraja prvku;
• padding-top - výplň z horného okraja prvku;
• padding-bottom - výplň z ľavého okraja prvku;

napríklad

padding : 3px 5px 7px 10px ; Alebo môžete podrobne špecifikovať: padding-left : 10px ; padding-right : 5px ; padding-top : 3px ; padding-bottom : 7px ;

Príklady s rôznymi zarážkami v rámci prvku

Príklad 1: Odsadenie textu v rámci značky

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

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

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

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

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

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

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

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