Zmeňte odsadenie a horné medzery v CSS. Horné čalúnenie CSS: Okraje výplne pre umiestnenie obsahu Div

Okraje a výplň sú veľmi dôležité štýly pri vytváraní stránky HTML. Umožňujú presnejšie umiestniť prvky, vytvoriť rám s potrebnými medzerami atď. Oba štýly sú veľmi podobné a plnia podobné funkcie. Ale stále existujú rozdiely.

Prvky môžu byť vnorené alebo umiestnené vedľa seba. Pozrime sa na nasledujúci príklad:

Máme dva stoly, citrónový a modrý, umiestnené pod sebou. Tabuľky pozostávajú z jednej bunky. V prvej bunke tabuľky je červený blok. Pomocou tohto príkladu sa pozrime, ako fungujú okraje a zarážky.

Polia sú nastavené podľa štýlu výplň. Tento štýl sa vzťahuje iba na prvky kontajnera, ktoré môžu obsahovať ďalšie prvky. Štýl vám umožňuje nastaviť okraj medzi okrajmi prvku a jeho obsahom. štýl marža umožňuje nastaviť odsadenie od prvku k najbližšiemu okraju iného prvku. Okrajmi iného prvku môžu byť okraje nadradeného kontajnera, ako aj okraje samotnej stránky.

Existuje niekoľko spôsobov, ako nastaviť tieto štýly. Napríklad priamo zadajte veľkosť všetkých okrajov alebo zarážok s jedným argumentom v nejakej mernej jednotke (px, ex, em, pt, cm atď.):

okraj: 3px;

padding: 3px 5px;

prvý určí množstvo okrajov/zarážok v hornej a dolnej časti, druhý - vľavo a vpravo. Keď sú uvedené tri argumenty:

okraj: 3px 5px 2px; prvý je okraj/odsadenie hore, druhý je vľavo aj vpravo, tretí je dole. So štyrmi argumentmi:, padding: 3px 5px 2px 6px;, okraj : 3px 5px 2px 6px ;, prvý je okraj/medzera navrchu, druhý je vpravo, tretí je dole, štvrtý je vľavo. Je ľahké si to zapamätať: prvý je zhora, potom v smere hodinových ručičiek. Okrem toho môžete nastaviť okraje a výplň pre konkrétny okraj samostatne pomocou vhodných štýlov:, vypchávka-top, polstrovanie-vpravo, vypchávka-dno, polstrovanie-vľavo margin-top

Na obrázku je červený blok vo vnútri bunky tabuľky a susedí s jej okrajmi, to znamená, že bunka nemá okraje. Nastavíme okraje buniek pomocou štýlu:

V dôsledku toho sa stránka zmení na nasledujúcu:

Pozrime sa teraz na priehlbiny. Dve tabuľky sú vedľa seba, ak ich chceme trochu od seba posunúť, môžeme použiť odsadenie. Tu sú dve možnosti: buď nastaviť spodnú zarážku prvej tabuľky, alebo hornú zarážku druhej tabuľky. Použime to druhé:

Upozorňujeme, že odsadenie nastavujeme špecificky pre tabuľku, a nie pre bunku tabuľky, ako je to v prípade polí. Tu je výsledok:

Mimochodom, v prvom prípade (medzera medzi červeným blokom a hranicami nadradenej bunky) by sa rovnaký efekt dal dosiahnuť nastavením odsadenia bloku. Vo všeobecnosti, ak niečo nie je jasné, dajte nám vedieť v komentároch.

HTML kód testovacej stránky:

Vitajte na mojom blogu. Css (Cascading Style Sheets) poskytuje veľa možností prispôsobenia vzhľad webové stránky. Dnes by som chcel stručne ukázať, ako v CSS definovať výplň na vrchu alebo na akejkoľvek inej strane pre akýkoľvek prvok.

Marža

Okraj sa nastavuje pomocou vlastnosti margin. S jeho pomocou môžete nastaviť okraje na všetkých štyroch stranách naraz, alebo využiť ďalšie vlastnosti: margin-top, margin-left, margin-right, margin-bottom, ktoré umožňujú urobiť ho len na jednej strane.

Okraj určuje vzdialenosť, o ktorú bude vybraný okraj prvku odsadený od ostatných prvkov na stránke. Napríklad záznam:

P,div(
Horný okraj: 20px;
}

To znamená, že všetky bloky a odseky budú v hornej časti odsadené o 20 pixelov, to znamená, že ich horná hrana sa o túto vzdialenosť posunie od susediacich prvkov.

Okraje je možné zapísať na každú stranu iba pomocou jednej vlastnosti okraja, do ktorej sú zapísané 4 hodnoty za sebou:

Div(
Okraj: 20px 10px 20px 10px;
}

Výplň bude daná z horného, ​​pravého, spodného a ľavého okraja. Keďže v tomto prípade sú rovnaké na opačných stranách, mohli by sme to napísať aj takto:

Div(
Okraj: 20px 10px;
}

Prvá hodnota je okraj v hornej a dolnej časti a druhá hodnota je okraj po stranách.

Odsadenie

Vnútorné čalúnenie funguje inak – neposúva blok od ostatných prvkov, ale skôr pridáva priestor v rámci prvku a posúva obsah bloku od jeho okrajov. Je to pohodlné. Kde ste videli webovú stránku, kde text začína úplne vľavo hore v okne?

Nevidel som to, pretože weboví vývojári vždy používajú externé a interné zarážky, aby bol text čo najjednoduchší. Vnútorné čalúnenie je špecifikované pomocou vlastnosti padding, v ktorej môžu byť uvedené 4 hodnoty naraz oddelené medzerou pre všetky hrany, resp.

Rovnako ako pri okraji môžete pridať názov strany a nastaviť vzdialenosť len pre ňu. Napríklad top padding je možné písať pomocou padding-top . Vo všeobecnosti vlastnosť padding funguje presne rovnako ako vlastnosť margin.

Môžete napríklad zadať tento kúsok kódu:

Blokovať(
Šírka: 200px;
Výplň: 20px;
}

Aká bude podľa vás skutočná šírka nášho prvku? Tu môžete vidieť, že je to 200 pixelov, ale výplne pridávajú ďalších 20 na každej strane, spolu 240 pixelov. Zohľadnite to pri navrhovaní.

Chcel by som tiež poznamenať, že výplň sa zvyčajne prideľuje iba prvkom bloku, je lepšie ju nedávať vloženým prvkom. Okraj funguje dobre so všetkými prvkami.

Dobrý deň, milí čitatelia blogu! Dnes budeme pokračovať v učení o kaskádových štýloch alebo CSS. V predchádzajúcich článkoch sme už vo všeobecnosti preskúmali blokové usporiadanie stránky. Vďaka tomu sme začali mať celkom profesionálne web stránky, ale niečo im chýbalo. Ale s najväčšou pravdepodobnosťou im chýbajú zarážky a rámy. Dnes sa pozrieme na štýlové pravidlá margin, padding a border, ktoré umožňujú nastaviť zarážky a rámce pre html prvky.

Možnosti odloženia CSS

Pomocou kaskádových štýlov je možné nastaviť dva typy zarážok.

1.Odsadenie je vzdialenosť od pomyselnej hranice prvku k jeho obsahu. Hodnota vzdialenosti sa určuje pomocou parametra výplň. Toto odsadenie patrí k samotnému prvku a nachádza sa v ňom.

2. Marža— vzdialenosť medzi okrajom aktuálneho prvku webovej stránky a okrajmi susedných prvkov alebo nadradeného prvku. Veľkosť vzdialenosti je riadená nehnuteľnosťou marža. Toto odsadenie sa nachádza mimo prvku.

Pre prehľadnosť obrázok:

Predstavte si napríklad bunku vyplnenú textom. Výplň je potom vzdialenosť medzi imaginárnym okrajom bunky a textom, ktorý obsahuje. A vonkajší okraj je vzdialenosť medzi okrajmi susedných buniek. Začnime s výplň.

Výplň v CSS pomocou výplne (hore, dole, vľavo, vpravo)

Vlastnosti štýlu padding-left, padding-top, padding-right a padding-bottom vám umožňujú nastaviť hodnoty paddingu vľavo, hore, vpravo a dole na prvku webovej stránky:

vypchávka-top | vypchávka-pravá | vypchávka-spodná časť | padding-left: value | úrok | dediť

Veľkosť odsadenia môže byť špecifikovaná v pixeloch (px), percentách (%) alebo iných jednotkách prijateľných pre CSS. Pri zadávaní percent sa hodnota vypočíta zo šírky prvku. Hodnota zdediť znamená, že je zdedená od rodiča.

Napríklad pre aktuálny odsek som použil pravidlo štýlu, ktoré nastavuje ľavú výplň na 20 pixelov, hornú výplň na 5 pixelov, pravú výplň na 35 pixelov a dolnú výplň na 10 pixelov. Zápis pravidla bude vyzerať takto:

p.test(
padding-left:20px;
padding-top:5px;
padding-right:35px;
padding-bottom: 10px
}

Pravidlo zloženého výplne umožňuje určiť zarážky na všetkých stranách prvku webovej stránky naraz:

výplň:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Prefabrikované pravidlo umožňuje použiť jednu, dve, tri alebo štyri hodnoty oddelené medzerou. V tomto prípade účinok závisí od počtu hodnôt:

• ak zadáte jednu hodnotu, nastaví sa miera odsadenia na všetkých stranách prvku stránky;
• ak zadáte dve hodnoty, prvá nastaví veľkosť odsadenia v hornej a dolnej časti a druhá - vľavo a vpravo;
• ak zadáte tri hodnoty, potom prvá určí veľkosť odsadenia hore, druhá - vľavo a vpravo a tretia - dole;
• ak sú zadané štyri hodnoty, prvá nastaví veľkosť odsadenia hore, druhá vpravo, tretia dole a štvrtá vľavo.

Vyššie uvedené pravidlo CSS je teda možné čo najviac skrátiť a napísať takto:

p.test( padding:5px 35px 10px 20px)

Vlastnosť margin alebo okraje v CSS

Atribúty štýlu margin-left, margin-top, margin-right a margin-bottom vám umožňujú nastaviť hodnoty okraja, vľavo, hore, vpravo a dole:

margin-top | okraj-pravý | okraj-dole | ľavý okraj:<значение>|auto|dediť

Ako je uvedené vyššie, okraj je vzdialenosť od okraja aktuálneho prvku k okraju susedného prvku, alebo ak neexistujú žiadne susedné prvky, k vnútornej hranici nadradeného kontajnera.

Veľkosť odsadenia možno zadať v pixeloch (px), percentách (%) alebo iných jednotkách povolených pre CSS:

p(
ľavý okraj: 20px;
}
h1(
pravý okraj: 15 %;
}

Hodnota auto znamená, že veľkosť odsadenia bude automaticky vypočítaná prehliadačom. Ak použijete percentuálny zápis, odsadenia sa vypočítajú v závislosti od šírka rodičovského kontajnera. Navyše to platí nielen pre ľavý okraj a pravý okraj, ale aj pre okraj hore a okraj dole, percentuálne okraje sa vypočítajú v závislosti od šírky, nie výšky, kontajnera.

Je povolené použiť ako hodnoty vonkajších zarážok záporné hodnoty:

p(
margin-left:-20px;
}

Ak s kladnými hodnotami odsadenia susedné prvky sú posunuté preč, potom pri zápornej hodnote bude susedný blok kolidovať s prvkom, pre ktorý sme nastavili takýto záporný posun.

Výplň môžeme určiť aj pomocou atribútu style marža. Nastavuje hodnoty odsadenia súčasne na všetkých stranách prvku webovej stránky:

okraj:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Pri zadávaní jednej, dvoch, troch alebo štyroch hodnôt výplne sa táto vlastnosť riadi rovnakými zákonmi ako pravidlo výplne.

Možnosti ohraničenia pomocou vlastnosti Border

Pri nastavovaní rámov existujú tri typy parametrov:

• border-width — hrúbka hranice;
• border-color — farba hranice;
• border-style — typ čiary, ktorou bude rám nakreslený.

Začnime parametrom hrúbky rámu:

šírka okraja: [hodnota | tenký | stredná | hrubý] (1,4) | dediť

Hrúbka rámu možno zadať v pixeloch alebo iných jednotkách dostupných v CSS. Premenné tenký, stredný a hrubý nastavujú hrúbku okraja na 2, 4 a 6 pixelov:

border-width:medium;

Rovnako ako pri vlastnostiach padding a margin, parameter border-width umožňuje jednu, dve, tri alebo štyri hodnoty, čím sa nastavuje šírka okraja pre všetky strany naraz alebo pre každú stranu samostatne:

border-width: 5px 3px 5px 3px

Pre aktuálny odsek nastavte hrúbku horného okraja na 1 pixel, vpravo 2 pixely, dolné 3 pixely a ľavé 4 pixely pomocou pravidla (šírka okraja: 1 pixel 2 pixely 3 pixely 4 pixely;)

Pomocou atribútov štýlu border-left-width, border-top-width, border-right-width a border-bottom-width môžete nastaviť hrúbku ľavej, hornej, pravej a spodnej strany okraja:

border-left-width|border-top-width|border-right-width|border-bottom-width: tenký|stredný|hrubý|<толщина>|dediť

Ďalším parametrom je border-color, pomocou ktorého môžete ovládať farba rámu:

farba okraja: [farba | transparentný] (1,4) | dediť

Vlastnosť umožňuje nastaviť farbu orámovania pre všetky strany prvku naraz alebo len pre zadané. Ako hodnotu môžete použiť metódy na určenie farieb akceptovaných v HTML: hexadecimálny kód, kľúčové slová atď.:

p (šírka okraja: 2 pixely; farba okraja: červená)

transparent nastaví farbu priehľadného okraja a zdedí hodnotu rodiča. Štandardne, ak nie je zadaná farba orámovania, použije sa tá, ktorá sa používa pre písmo vnútri daného prvku.

Pomocou atribútov štýlu border-left-color, border-top-color, border-right-color a border-bottom-color môžete nastaviť farbu ľavej, hornej, pravej a spodnej strany okraja:

border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|dediť

A posledný parameter border-style špecifikuje typ rámu:

border-style: (1,4) | dediť

Typ rámu možno zadať pre všetky strany prvku naraz alebo len pre tie, ktoré sú zadané. Ako hodnoty môžete použiť viacero kľúčových slov. Vzhľad bude závisieť od použitého prehliadača a hrúbky rámu. Význam žiadny sa používa štandardne a nezobrazuje rám a jeho hrúbka je nastavená na nulu. Skrytá hodnota má rovnaký účinok. Výsledný rámec pre iné hodnoty v závislosti od hrúbky je uvedený v tabuľke nižšie:

Atribúty štýlu border-left-style, border-top-style, border-right-style a border-bottom-style určujú štýl čiar, ktoré budú nakreslené na ľavej, hornej, pravej a spodnej strane rámu, v tomto poradí:

border-left-style|border-top-style|border-right-style|border-bottom-style: none|skryté|bodkované|čiarkované|plné|dvojité|drážka|hrebeň|vložka|výstup|zdiť

Rovnako ako pri možnostiach výplne a výplne, existujú generický hraničný majetok. Umožňuje súčasne nastaviť hrúbku, štýl a farbu okraja okolo prvku:

hranica: | dediť

Hodnoty môžu byť v ľubovoľnom poradí oddelené medzerami:

td (ohraničenie: 1px súvislá žltá)

Ak chcete nastaviť orámovanie iba na určitých stranách prvku, existujú vlastnosti border-top, border-bottom, border-left, border-right, ktoré vám umožňujú nastaviť parametre pre hornú, spodnú, ľavú a pravá strana rámec

Zostáva len zhrnúť:

• za úlohu výplň užívame nehnuteľnosť výplň;
• nakonfigurovať marže existuje pravidlo marža;
• parametre rámu sú špecifikované pomocou atribútu hranica.

Podotýkam, že všetky tieto vlastnosti css zväčšiť veľkosť prvku webovej stránky. Ak teda zmeníme hrúbku orámovania alebo veľkosť výplne blokových kontajnerov, ktoré tvoria dizajn webovej stránky, budeme musieť zodpovedajúcim spôsobom zmeniť veľkosti týchto kontajnerov, inak sa môžu posunúť a dizajn bude zlomený.

To je všetko, vidíme sa nabudúce!

Dnes sa s vami porozprávame trochu o princípoch rozloženia, konkrétne o spôsoboch usporiadania odsadenia na vašom webe pre určité prvky.

Príslušným prvkom, ktorý je potrebné odsadiť, môže byť text, obrázok, tabuľka alebo akýkoľvek iný prvok HTML. Hlavná vec je dodržiavať niektoré dôležité pravidlá, o ktorých vám teraz poviem.

Ak práve vytvárate svoju stránku, potom vám odporúčam vložiť nasledujúce vlastnosti na začiatok hlavného súboru štýlu:

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

Prečo je to potrebné, pýtate sa? Na vašu otázku odpovedám jasným príkladom.

Povedzme, že máte prvok rozloženia, ako je tento:

Takto bude voľba vyzerať bez použitia vlastností popísaných vyššie (horný prvok) a s ich použitím (dolný prvok):

Čo tu môžete vidieť? Že šírka prvku v prvej verzii (bez použitia vlastností) sa zväčšila v dôsledku pridaných zarážok, čo nie je úplne pohodlné a správne z hľadiska rozloženia.

Možnosť s vlastnosťami je oveľa estetickejšia, ale mali by ste ju používať vedome, pretože keď ich pridáte na hotovú stránku, riskujete zlý dizajn a „bolesť hlavy“ v podobe uvedenia všetkého do správnej formy. . Všetky projekty, ktoré som mal možnosť viesť od nuly, neboli bez týchto vlastností.

A teraz v skutočnosti poďme hovoriť o možnostiach usporiadania zarážok pre prvky na vašom webe s vizuálnymi príkladmi.

Výplň pomocou vlastnosti CSS „padding“.

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

s vlastnými štýlmi:

Test_div (šírka: 250px; orámovanie: 1px plný; )

Vizuálna verzia vyzerá takto:

Aká je nehnuteľnosť" výplň"? Pomáha organizovať vnútorné odsadenie v špecifikovaných prvkoch. Pridajme do nášho rozloženia vnútornú výplň 10px:

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

Vizuálne to vyzerá takto:

Číslo 10 vo vlastnosti znamená, že vo vnútri špecifikovaných prvkov, na každej z ich štyroch strán, musíte pridať okraj 10px. Pixely (px) je možné nahradiť percentami alebo inými hodnotami podporovanými CSS.

Sú dve možnosti označenie strán, z ktorých sa musia urobiť zárezy.

Po prvé- toto je s výslovným uvedením strán:

Padding-top: 10px; // 10px top padding-right: 10px; // 10px padding vpravo padding-bottom: 10px; // Vnútorná výplň 10px od spodného padding-left: 10px; // 10px ľavá výplň

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

Padding: 10px 0 0 0; // Vnútorná výplň 10px navrchu, všetko ostatné - 0px výplň: 10px 0; // Vnútorná výplň 10px hore a dole a po stranách - 0px výplň: 0 10px; // Vnútorná výplň 0px hore a dole a 10px na bokoch

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

Ak existujú dve hodnoty (hore a vpravo), znamená to, že v zrkadle idú rovnaké hodnoty nadol a doľava, a to je jediný spôsob. Zdá sa, že všetko je jasné. Ak nepotrebujete nastaviť odsadenie pre jednu zo strán, nastavte hodnotu pre túto stranu na „0“. Táto možnosť sa mi páči viac, pretože je kompaktnejšia, ale pri mojom úsilí som použil prvú možnosť.

Tento typ odsadenia je vhodný na oddelenie textu, obsahu buniek tabuľky atď. textové informácie. Na oddelenie samotných prvkov, podobne ako v príklade vyššie, existuje ďalšia vlastnosť.

Okraj pomocou vlastnosti CSS „margin“

Charakteristickým znakom nehnuteľnosti " marža“ znamená, že odsadenie je pridané mimo prvku, teda externé.

Tu sú tiež dve možnosti pridania.

Po prvé– s výslovným označením strany:

Horný okraj: 10px; // 10px okraj na hornom okraji-vpravo: 10px; // 10px okraj na pravom okraji-dole: 10px; // Vonkajší okraj 10px od spodného okraja-vľavo: 10px; // 10px ľavý okraj

Po druhé– so zoznamom hodnôt, z ktorých každá zodpovedá svojej strane:

Okraj: 10px 0 0 0; // Vonkajší okraj 10px navrchu, všetko ostatné - 0px okraj: 10px 0; // Okraj 10px hore a dole a po stranách - 0px okraj: 0 10px; // Vonkajšie čalúnenie 0px hore a dole a 10px na bokoch

Nebudem tu popisovať všetky nuansy práce s pravidlami, všetko je rovnaké ako pri nehnuteľnosti “ výplň“, písalo sa o ňom vyššie.

Použijeme margin s nasledujúcou hodnotou:

Test_div (šírka: 250px; orámovanie: 1px plný; okraj: 10px; // Okraj 10px)

Vizuálne to bude vyzerať takto:

Ako je zrejmé z príkladu, v tomto prípade sa na oddelenie špecifikovaných prvkov pridá vonkajší okraj.

Dôležitá vlastnosť: Ak ste sa pozorne pozreli na výsledok, možno ste si všimli, že priľahlé zarážky prvkov sa nezhodujú. To znamená, že ak má prvý prvok spodný okraj 10 pixelov a druhý prvok má horný okraj rovnakej hodnoty, celková vzdialenosť medzi nimi bude tiež 10 pixelov. Ak 10 a 15, potom je súčet 15 atď.

Táto možnosť odsadenia sa často používa v texte, konkrétne pri návrhu odsekov, ako aj v prvkoch, ktoré majú viditeľné okraje.

Obe vlastnosti sa však neobmedzujú len na tieto prvky. Možnosti ich použitia si vyberáte sami, ja som sa vám o nich pokúsil poskytnúť základné informácie.

Rozloženie CSS bolo vždy obdĺžnikové. Akékoľvek hladké línie sú kompetenciou vývojára. Pravidlá štýlu poskytujú dostatok možností, aby stránka získala hladký tvar v rámci rozlíšenia obrazovky. Ale každý prvok rozloženia je vždy obdĺžnik, v ktorom sa usporiadanie informácií riadi pravidlami CSS.

Celostranné odsadenie je dôležité pre každý prvok stránky, keď je úplne umiestnený, a vrchné odsadenie CSS je špecificky definované, pretože je dôležité pre rôzne prvky, najmä tie vložené.

Základné pravidlá polohovania

Blokový prvok má pravidlo pre odsadenie od strán prvku, ktorý obsahuje (margin), pravidlo pre odsadenie pre prvky v ňom (padding) a šírku okraja (border), ktoré možno tiež použiť.

Odsadenie v hornej časti je obzvlášť dôležité. CSS v rámci bloku spája pravidlá výplne s pravidlami pre absolútne a relatívne umiestnené prvky v rámci daného bloku.

Bežná prax pre pravidlá CSS: môžete zadať rovnaké odsadenie na všetkých stranách, v pároch hore/dole a vpravo/vľavo, alebo pre každú stranu samostatne. napr.

• okraj: 10px;
• výplň: 10px20px;
• výplň: 10px20px30px40px.

V prvom prípade sa nastaví odsadenie prvku zo strán vonkajšej nádoby, v ktorej sa nachádza. V druhom prípade sú okraje hore a dole 10px, vľavo a vpravo - 20px. V treťom prípade je veľkosť zarážok označená na všetkých stranách: hore, vpravo, dole a vľavo.

Vo všetkých týchto prípadoch odsadenie top CSS je 10 px.

Pravidlá, ktoré menia polohu prvkov

Ak prvok rozloženia nie je umiestnený absolútne, umiestni sa vo všeobecnom poradí tvorby stránky.

Ak definujeme padding on top CSS v elemente scCurrInfo, cieľ sa dosiahne, ale ak na úrovni li, tak nie.

V tomto príklade s použitím pravidla výplne: 40px; vyžaduje primerané zníženie pravidiel šírky a výšky o 80 pixelov. IN inak Veľkosť bloku scCurrInfo presiahne hranice vonkajšieho bloku.

Ak odstránime pravidlo výplne z popisu scCurrInfo, ale pridáme ho s hodnotou 20px do popisu štýlu položky zoznamu, dostaneme iba horná zarážka. Porovnávač cien túto hodnotu nepoužije na iné strany.

Prirodzene, toto použitie pravidla odsadenia sa vzťahuje na každý prvok li.

Všeobecné postupy formátovania obsahu

Niektorí vývojári dosahujú dokonalosť rozložením stránok pomocou blokových prvkov. Vraj ide o klasickú prax – začať tabuľkami a svoj vlastný vzdelávací proces ukončiť blokmi.

Voľnosť obsiahnutá v blokovom usporiadaní je fascinujúca a predstavivosť vývojára nemusí byť obmedzená prísnymi pravidlami tabuľky: iba riadky, iba bunky, zlúčené iba horizontálne a vertikálne. Nič zvláštne na vzťahových predstavách.

Medzitým majú tabuľky okrem zjavných nevýhod mnoho kvalitatívnych výhod. Pri vytváraní výplne v hornej časti CSS berie do úvahy výplň vľavo, vpravo (dole je špeciálny moment). Pravidlá buniek tabuľky vám umožňujú ovládať vertikálne aj horizontálne zarovnanie. Pomocou štýlov riadkov a ich kombinovaním so štýlmi buniek môžete vytvárať komplexné zobrazenia obsahu.

Obvyklé znázornenie stránky vo forme obdĺžnikov vôbec nebráni tomu, aby bola prezentovaná vo forme tabuľky. Sú to tiež obdĺžniky, ale sú to aj bunky tabuľky, to znamená, že majú svoje pravidlá, ktoré dopĺňajú pravidlá blokov.

Absolútna poloha

Blok s pravidlom POSITION: absolútna ; bude umiestnený na mieste určenom jeho súradnicami vzhľadom na blok, v ktorom sa nachádza.

Charakteristickou črtou pravidiel CSS je, že „prax je najlepším kritériom pravdivosti“ vo väčšine prípadov, najmä ak sa vyžaduje kompatibilita medzi prehliadačmi a rozloženie sa vykonáva manuálne, je vhodnejšie ako študovať plnohodnotné príručky na kaskádových štýloch.

Používanie tabuliek často vedie k problémom s posunom obsahu buniek. Podobný posun v rámci bloku neovplyvňuje vždy všetky prvky. Experimentovaním môžete dosiahnuť požadovaný výsledok. Triviálna úloha: ako odstránenie vrchnej výplne nie je pre CSS vždy triviálnym riešením.

V niektorých prípadoch, keď musíte rozložiť prvky stránky v útrobách nejakého obľúbeného redakčného systému webstránok, stále treba dbať nielen na experimentálnu prax, ale pozrieť sa aj na skúsenosti svojich kolegov.