Jak vytvořím polstrování v CSS?

CSS Padding umožňuje kodéru HTML nastavit výchozí polstrování nebo mrtvý prostor mimo prvek HTML. Výhodou toho je, že uloží kodér v opakování tohoto kódu polstrování pro každý instanci tohoto prvku a snadněji vytváří konzistenci na stránce. Prvek HTML, který má být polstrován, může být libovolný počet věcí, jako je odstavec, tabulka nebo nadpis.

Chcete -li vytvořit polstrování v CSS, budete nejprve muset identifikovat prvek HTML, který chcete podávat. Tento prvek, který chcete podávat, je známý jako selektor. Poté budete chtít zadat příslušné hodnoty polstrování. V CSS je pět různých typů polstrovacích vlastností - jeden pro všechny čtyři strany prvku najednou a čtyři další pro každou jednotlivou stranu prvku (např. Levá strana, pravá strana, horní strana nebo spodní strana). Vlastnost, která umožňuje programátorovi zadat hodnoty pro všechny čtyři strany prvku HTML najednou, se nazývá vlastnost zkratka .

Kódovací jazyk používaný k určení jednoho deklarace polstrování CSS je jednoduše slovo „polstrování“. Po tomto štítku jsou příslušné „hodnoty“ polstrování nebo informace o množství požadovaného prostoru, obvykle představované buď pixely nebo procentem. Vycpávání a hodnoty jsou psány uvnitř kudrnatých rovnátka nebo kudrnatých konzolů (tj. "{" A "}"). Předcházející to vše je prvek HTML, který má být polstrován (např. "P" pro odstavec nebo "H2" pro záhlaví úrovně 2).

Pokud jde o to, jak je hodnota reprezentována, hodnoty mohou být reprezentovány v pixelech (např. 1px nebo 5px), bodech (např. 1pt nebo 5pt) nebo palce (např. 1in nebo 5in) nebo centimetrů (např. 1cm nebo 5 cm). Hodnoty lze také deklarovat jako procento stylu prvku HTML. Pokud je například hodnota 50%, polstrování se rovná polovině velikosti prvku.

Následující příklady jsou kód HTML pro polstrování HTML Element podle hodnot odrážejících v procentech a délce. Pokud je přiřazena pouze jedna hodnota, pak webové prohlížeče přiřadí toto polstrování na všechny čtyři strany prvku HTML.

Padding: 10%;
Padding: 100px;

Přidání více hodnot k výše uvedenému typu deklarace polstrování způsobí, že je webové prohlížeče interpretují určitým způsobem. Pokud jsou přiřazeny dvě hodnoty, první bude odpovídat horní a dolní části, zatímco druhý odpovídá doleva a doprava. Tři hodnoty způsobí, že se první odkazuje na vrchol, druhý na levé a pravé straně a třetí na dno prvku HTML. Přiřazení maximálních čtyř hodnot způsobí, že první, druhé, třetí a čtvrté hodnoty odpovídají hornímu, pravému, dolnímu a levému prvku HTML v tomto pořadí. Pokud je poskytnuta více než jedna hodnota, měla by být oddělena mezerami a skončila například polokrounem, například:

Padding: 10px 20px 10px 20px;

polstrování v CSS lze provést na jednu stranutaké čas. V tomto ohledu jsou k dispozici další čtyři polstrovací vlastnosti. Jedná se o polstrování-top, polstrování-pravý, polstrovací dno a levý polstrování. Chcete -li vytvořit polstrování v CSS tím, že je třeba označit vlastnosti stejnou syntaxí jako deklarace zkratky, jak je uvedeno výše. Každá z těchto polstrovacích vlastností má pouze jednu hodnotu v délce nebo procentech. Například:

Padding-top: 10px;
Padding-Right: 20px;
Padding-Bottom: 10px;
Padding-left: 20px;

Následující kód vytvoří webovou stránku, prohlašuje vlastnosti polstrování mezi značkami stylů a poté je používá v prvku odstavce určeného značkou P. Text mezi/ * a */jsou poznámky k vysvětlení typu použitého polstrování a nebyl by zahrnut do kódu polstrování CSS.

P.Example1 {Padding: 10px;} /* Short-Hand Padding pro všechny čtyři strany* /
P.Example2 {Padding: 50px 30px;} /* krátký padding na horní a dolní část následované levým a pravým */
P.Example3 {
Padding-top: 10px;
Padding-Bottom: 20px;
Padding-Bottom: 10px;
Padding-Left: 20px;
} /* individuální polstrování. */

Tento text má na každé straně stejné polstrování. Vycpávání na každé straně je 10px.

Tento text má horní a dolní polstrování 50px a levý a pravý polstrování 30px.

Tento text má nejvyšší polstrování 10px, pravé polstrování 20px, spodní polstrování 10px a levé polstrování 20px.

Ve výše uvedeném příkladu „Příklad1“ atd. Jsou jména přiřazená ke třídě, na které se pak odkazuje v odstavcích. Období mezi značkou P a názvy třídy na začátku kódu označuje prohlášení třídy přiřazené odstavcem. Všimněte si rovnátka po prohlášení třídyATION CLOSKOVÁNÍ PŘIPOJENÍ PLACKING HODNOSTI VLASTNOSTI.

Ačkoli by se to mohlo zdát jako hodně práce, je to mnohem méně náročné na práci než stanovení polstrování pro každý jednotlivý odstavec. Pro požadovaný prvek můžete deklarovat jednu vlastnost polstrování, který je ve výše uvedeném příkladu značka P, a poté odkazujte na třídu, když používáte prvek mezi značkami těla na stránce. Pokud je pro všechny odstavce potřebný pouze jeden typ polstrování, nemusíte používat kurzy vůbec. Jednoduše použijte následující kód mezi značkami stylu a poté odstavce kódujte bez zadání jakékoli třídy. Tento kód by šel mezi značkami těla místo kódu ve výše uvedeném příkladu.

p {padding: 10px 20px 10px 20px;}

Toto polstrování CSS, které by vytvořilo, by ovlivnilo všechny odstavce, i když nebyla specifikována žádná třída.