Jak stworzyć wyściółkę w CSS?

Padding CSS pozwala koderowi HTML ustawić domyślną wyściółkę lub martwą przestrzeń poza elementem HTML.Zaletą tego jest to, że zapisuje kodera przed powtarzaniem tego kodu wyściółki dla każdego wystąpienia tego elementu i łatwiej powoduje spójność na stronie.Element HTML do wyściółki może być dowolna liczba rzeczy, takich jak akapit, tabela lub nagłówek.

Aby utworzyć wyściółkę w CSS, najpierw będziesz musiał zidentyfikować element HTML, który chcesz wpaść.Ten element, który chcesz padać, jest znany jako selektor.Następnie będziesz chciał określić odpowiednie wartości wyściółki.Istnieje pięć różnych rodzajów właściwości wyściółki w CSS mdash;jedna dla wszystkich czterech stron elementu jednocześnie, a cztery inne dla każdej indywidualnej strony elementu (np. Lewa strona, prawa strona, górna strona lub dolna strona).Właściwość, która pozwala programistowi określić wartości dla wszystkich czterech stron elementu HTML jednocześnie, nazywa się właściwością stenograficzną .

Język kodowania używany do określenia jednej deklaracji wyściółki CSS jest po prostu słowo „wyściółka”.Zgodnie z tą etykietą są odpowiednie wartości wyściółki lub informacje o ilości pożądanej przestrzeni, zwykle reprezentowane przez piksele lub procent.Wyściółka i wartości są zapisywane wewnątrz klastrowych aparatów ortodontycznych lub kręconych nawiasów (tj. {I}).Poprzedzając to wszystko element HTML, który ma być wyściełany (np. P dla akapitu lub H2 dla nagłówków poziomu 2).

Pod względem reprezentowania wartości, wartości można reprezentować w pikselach (np. 1px lub 5px), punkty (np. 1pt lub 5pt) lub cale (np. 1 cala lub 5 cali) lub centymetry (np. 1 cm lub 5 cm).Wartości można również zadeklarować jako procent stylowania elementu HTML.Jeśli wartość wynosi 50%, na przykład wypełnienie będzie równe połowę wielkości elementu.

Poniższe przykłady są kodem HTML do wyściółki elementu HTML za pomocą wartości odpowiednio w procentach i długości.Jeśli przypisana jest tylko jedna wartość, wówczas przeglądarki internetowe przypisają tę wyściółkę do wszystkich czterech stron elementu HTML.

Wyściółka: 10%;
Wył.Jeśli przypisane zostaną dwie wartości, pierwsze będzie odpowiadały górnemu i dolnemu, podczas gdy drugi odpowiada lewej i prawej.Trzy wartości spowodują, że pierwsze odniesie się do góry, drugie po lewej i prawej stronie, a trzeci do dolnej części elementu HTML.Przypisanie maksimum czterech wartości powoduje, że pierwsza, druga, trzecia i czwarta wartości odpowiadają górnym, prawym, dolnym i lewym elementowi HTML w tej kolejności.Gdy zapewniono więcej niż jedną wartość, należy je oddzielić przestrzeniami i zakończyć półkolonem, na przykład:

Wyściółka: 10px 20px 10px 20px;

Władze w CSS można wykonać również po jednej stronie na raz.Pod tym względem dostępne są cztery kolejne nieruchomości wyściółki.Są to wyściółki, prawe wyściółki, wyściółki i wyściółki lewicowe.Aby utworzyć wyściółkę w CSS w ten bardziej precyzyjny sposób, musisz oznaczyć właściwości o tej samej składni jak deklaracje skrótów jak powyżej.Każda z tych właściwości wyściółki ma tylko jedną wartość pod względem długości lub procentu.Na przykład:

Padding-TOP: 10px;

Windding-Right: 20px;

Wyściółka: 10px;

Padding-Left: 20px;

Poniższy kod tworzy stronę internetową, deklaruje właściwości wyściółki między tagami stylów iNastępnie używa ich w elemencie akapitowym określonym przez znacznik P.Tekst między/ * a */są notatkami wyjaśniającymi rodzaj zastosowanej wyściółki i nie byłby zawarty w kodzie wyściółki CSS.

lt; html gt;

lt; head gt;

lt; styl typu ' tekst/css gt;

P.Example1 {wyściółka: 10px;} /* Padding krótkoterminowy dla wszystkich czterech stron* /
P.Example2 {Padding: 50px 30px;} /* Krótka wyściółka dla górnej i dolnej, a następnie po lewej stronie leweji prawe * /
P.Example3 {
Padding-Top: 10px;
Wyściełko-Bottom: 20px;
Padding-Bottom: 10px;
Padding-left: 20px;
} / * Indywidualne wyściółki.*/
lt;/style gt;
lt; head gt;

lt; body gt;
lt; p class ' przykład1 i gt; ten tekst ma tę samą wyściółkę z każdej strony.Wyściółka z każdej strony wynosi 10px.' ”Przykład3” gt; ten tekst ma górną wyściółkę 10px, prawą wyściółkę 20px, dolną wyściółkę 10px oraz lewą wyściółkę 20px. P p gt;
body gt;
lt;/html gt;

W powyższym przykładzie „Przykład 1, itd. Są nazwiskami przypisanymi do klasy, do których są następnie odwoływane w akapitach.Okres między znacznikiem P a nazwami klas na początku kodu oznacza deklarację klasy przypisanej do akapitu.Zwróć uwagę na aparat ortodontyczny po deklaracji klasowej zawierającej przypisania wartości właściwości wyściółki.

Chociaż może to wydawać się dużo pracy, jest to znacznie mniej pracochłonne niż określanie wyściółki dla każdego akapitu.Możesz zadeklarować jedną właściwość wyściółki dla żądanego elementu, który w powyższym przykładzie jest znacznik P, a następnie odwołać się do klasy, gdy używasz elementu między znacznikami ciała strony.Jeśli potrzebny jest tylko jeden rodzaj wyściółki dla wszystkich akapitów, nie musisz w ogóle używać zajęć.Po prostu użyj następującego kodu między znacznikami stylów, a następnie kod akapity bez określenia żadnej klasy.Ten kod przemierzyłby się między znacznikami ciała zamiast kodu w powyższym przykładzie.

P {Padding: 10px 20px 10px 20px;}

To wyściółka CSS wpłynęłaby na wszystkie akapity, nawet jeśli nie określono klasy.