Vlastnost CSS padding: jak vytvořit pole
CSS nabízí webovému vývojáři obrovské možnosti pro navrhování stránek HTML. Pro začátečníka se to může zdát obtížné, ale pokud je důkladně a metodicky porozumíte, technologie stylových listů bude tlumená a rozvržení stránek už nebude obtížné. Jedním z nepostradatelných vlastností CSS je polstrování . Používá se k nastavení polí pro bloky stránek HTML.
Co jsou bloky?
Místo je postaveno z cihel - bloků. Navíc každý prvek, bez ohledu na jeho obsah, musí mít obdélníkový tvar. To znamená, že všechny obrazy a nápisy jsou mentálně uzavřeny vývojářem v "krabicích", které vytváří webovou stránku.
Nejčastěji se bloky nastavují podle značek.
,
- , . Vlastnosti CSS jsou aplikovány na každý takový prvek: polstrování , okraj , hranice , šířka a další. Šířka obdélníku bloku je dána vlastností šířky , pak každý prvek je tvořen polemi, které jsou načrtnuty pomocí atributu hranice. Konečně součást stránky může mít vnější okraje nebo odrážky, okraje , které ji oddělují od jiného bloku. Syntaxe vlastnosti CSS výplně
Tvůrci kaskádových stylových listů poskytli několik možností pro zápis atributu pro nastavení polí. Můžete vytvořit prázdnou oblast uvnitř bloku osmi různými způsoby! Níže uvedená tabulka uvádí příklady pro každou z možností a poskytuje jim stručné vysvětlení.
Příklad použití
Vysvětlení
polstrování: 15 px;
Pokud po atributu následuje jedno číslo, znamená to, že prvek bude mít stejné pole ze všech stran. Položka px předpokládá, že hodnota je v pixelech. To znamená, že blok bude mít okraje 15 pixelů.
polstrování: 18 px 36 px;
První z těchto dvou čísel označuje, že svislé pole budou mít 18 pixelů, boční pole dvakrát tak velká - 36 pixelů.
polstrování: 6 px 12 px 18 px;
Průměr je hodnota polí po stranách (vlevo a vpravo), ostatní dvě jsou svislé. První číslo (6 px) označuje horní pole a poslední (18 px) odkazuje na dolní část.
polstrování: 6 px 12 px 18 px 36 px;
Forma vlastností vycpávky CSS, ve které jsou čtyři čísla, umožňuje zadat pole na všech stranách bloku. Numerické hodnoty jsou konzistentně aplikovány na horní pole a dále vpravo, dolů a doleva.
polstrování vlevo: 14 px;
Levý přísloví hovoří sám o sobě - pole bude nastaveno pouze vlevo od prvku.
polstrování doprava: 14 px;
Stejně jako předchozí možnost záznamu - pole bude vytvořeno pouze vpravo od bloku.
polstrování: 14 px;
Položka označuje pole v horní části.
polstrování dolní: 14 px;
Položka identifikuje níže uvedené pole.
Je třeba poznamenat, že výchozí polstrování CSS je nulové. Tento atribut není dědičný, to znamená, že musí být nastaven pro každý blok. Kromě obvyklých a srozumitelných pixelů je šířka prázdného prostoru kolem bloků uvedena v relativních jednotkách. Například ve výše uvedených příkladech můžete zaznamenat 5% - v důsledku toho je šířka pole vypočítána prohlížečem automaticky.
Jak používat nemovitost?
Takže jsou přiřazeny atributy záznamových formulářů, ale jak je používat na stránce HTML? První možnost je mnohem "krásnější", když všechno, co souvisí s technologií CSS, není zapsáno do HTML, ale vykresleno v samostatném souboru s odpovídajícím rozšířením.
Druhou možností je zápis přímo do značky < style >. Polstrování CSS v tomto případě je definováno následovně:
< div style = " padding: 22 px">
Jak napsat atribut - vyberte výrobce. V každém případě je nutné vlastnit všechny způsoby použití vlastnosti pro určení polí, aby bylo možné je použít příležitostně.
Syntaxe vlastnosti CSS výplně
Tvůrci kaskádových stylových listů poskytli několik možností pro zápis atributu pro nastavení polí. Můžete vytvořit prázdnou oblast uvnitř bloku osmi různými způsoby! Níže uvedená tabulka uvádí příklady pro každou z možností a poskytuje jim stručné vysvětlení.
Příklad použití | Vysvětlení |
polstrování: 15 px; | Pokud po atributu následuje jedno číslo, znamená to, že prvek bude mít stejné pole ze všech stran. Položka px předpokládá, že hodnota je v pixelech. To znamená, že blok bude mít okraje 15 pixelů. |
polstrování: 18 px 36 px; | První z těchto dvou čísel označuje, že svislé pole budou mít 18 pixelů, boční pole dvakrát tak velká - 36 pixelů. |
polstrování: 6 px 12 px 18 px; | Průměr je hodnota polí po stranách (vlevo a vpravo), ostatní dvě jsou svislé. První číslo (6 px) označuje horní pole a poslední (18 px) odkazuje na dolní část. |
polstrování: 6 px 12 px 18 px 36 px; | Forma vlastností vycpávky CSS, ve které jsou čtyři čísla, umožňuje zadat pole na všech stranách bloku. Numerické hodnoty jsou konzistentně aplikovány na horní pole a dále vpravo, dolů a doleva. |
polstrování vlevo: 14 px; | Levý přísloví hovoří sám o sobě - pole bude nastaveno pouze vlevo od prvku. |
polstrování doprava: 14 px; | Stejně jako předchozí možnost záznamu - pole bude vytvořeno pouze vpravo od bloku. |
polstrování: 14 px; | Položka označuje pole v horní části. |
polstrování dolní: 14 px; | Položka identifikuje níže uvedené pole. |
Je třeba poznamenat, že výchozí polstrování CSS je nulové. Tento atribut není dědičný, to znamená, že musí být nastaven pro každý blok. Kromě obvyklých a srozumitelných pixelů je šířka prázdného prostoru kolem bloků uvedena v relativních jednotkách. Například ve výše uvedených příkladech můžete zaznamenat 5% - v důsledku toho je šířka pole vypočítána prohlížečem automaticky.
Jak používat nemovitost?
Takže jsou přiřazeny atributy záznamových formulářů, ale jak je používat na stránce HTML? První možnost je mnohem "krásnější", když všechno, co souvisí s technologií CSS, není zapsáno do HTML, ale vykresleno v samostatném souboru s odpovídajícím rozšířením.
Druhou možností je zápis přímo do značky < style >. Polstrování CSS v tomto případě je definováno následovně:
< div style = " padding: 22 px">
Jak napsat atribut - vyberte výrobce. V každém případě je nutné vlastnit všechny způsoby použití vlastnosti pro určení polí, aby bylo možné je použít příležitostně.