CSS абіўка з'яўляецца адным з уласцівасцяў мадэлі CSS скрынкі . Гэта скарочанае ўласцівасць задае водступы вакол усіх чатырох бакоў HTML элемента. CSS абіўка можа быць прыменена да амаль кожнаму тэгу HTML (для некаторых з тэгаў табліцы , за выключэннем). Акрамя таго, усе чатыры боку элемента можа мець іншае значэнне.
CSS водступы нерухомасці
Для таго, каб выкарыстоўваць скарочаны CSS абіўка ўласцівасць, вы можаце выкарыстоўваць мнеманічную «Trouble» (ці «Триббл» для вас прыхільнікаў Star Trek). Гэта азначае зверху, справа, знізу і злева, і гэта ставіцца да парадку запаўнення Шырын вы ўсталявалі ў скарочанай уласнасці. Напрыклад:
абіўка: правы верхні левы ніжні; абіўка: 1px 2px 3px 6px;Калі вы выкарыстоўвалі значэнне, пералічанае вышэй, будзе прымяняцца розныя значэннямі абіўкі у кожны бок ад любой HTML элемента, які вы падаеце яго. Калі вы хочаце ўжыць той жа водступ для ўсіх чатырох бакоў, вы можаце спрасціць CSS і проста напісаць адно значэнне:
абіўка: 12px;З гэтай лініі CSS, 12 кропак запаўнення будзе прымяняцца да ўсіх 4-х бакоў элемента.
Калі вы хочаце, каб абіўка быць аднолькавай для верхніх і ніжніх, і злева і справа, вы можаце напісаць два значэння:
абіўка: 24px 48px;Першае значэнне (24px) будзе прымяняцца да верхняй і ніжняй часткі, у той час як другі будзе прымяняцца налева і направа.
Калі вы пішаце тры значэнні, якія зробяць гарызантальны водступ (левы і правы) тое ж самае, у той час як змяненне верхняй і ніжняй часткі:
уцяпляльнік: верхні правы і левы знізу; абіўка: 0px 1px 3px;Згодна з мадэлі CSS скрынкі, абіўка бліжэй за ўсё да самога элементу / кантэнту. Гэта азначае, што запаўненне дадаецца да элемента паміж шырынёй кантэнту або вышынёй і любымі пагранічнымі значэннямі, якія вы выкарыстоўваеце. Калі запаўненне ўстаноўлена роўным нулю, то яно мае тую ж самую, што і край змесціва.
CSS водступы Значэнні
CSS абіўка можа прымаць любое неадмоўнае значэнне даўжыні. Не забудзьцеся пазначыць вымярэння, такія як рх або эм. Вы можаце таксама пазначыць працэнт для вашага запаўнення, які будзе адсоткам ад шырыні які змяшчае блока элемента. Гэта ўключае ў сябе для верхняй і ніжняй пракладкі. Напрыклад:
#container {шырыня: 800px; вышыня: 200px; } #container р {шырыня: 400px; вышыня: 75%; абіўка: 25% 0; }Вышыня абзаца ўнутры элемента #container будзе складаць 75% ад вышыні #container «ы плюс 25% ад шырыні для верхняй пракладкі і 25% ад шырыні для ніжняй пракладкі. Гэта складае 300 + 200 + 200 = 700px.
Эфекты Даданне CSS Перацяжка
На блокавыя элементы , пракладка наносіцца па чатырох баках. Паколькі элемент ўяўляе сабой блок або скрынка ўжо, пракладка прыкладваецца да скрынцы бакоў.
Калі CSS абіўка дадаецца да радковых элементаў , могуць быць некаторыя перакрываць элементаў вышэй і ніжэй радковага элемента , калі вертыкальная пракладка перавышае вышыню радка, але ён не будзе штурхаць вышыню радкі ўніз. Гарызантальны CSS абіўка ўжываецца для ўбудаваных элементаў будзе дададзеная да пачатку элемента і канца элемента. А пракладка можа абгарнуць лініі. Але гэта не будзе прымяняцца да ўсіх радках элемента шматрадковых, так што вы не можаце выкарыстоўваць водступы для водступу сегмента радковага ўтрымання шматрадковага.
Акрамя таго, у CSS2.1, вы не можаце стварыць кантэйнер блокаў, дзе шырыня залежыць ад элемента з працэнтамі для шырыні (або шырыні запаўнення). Калі вы робіце тое вынік не вызначаны. Браўзэры ранейшаму будзе адлюстроўваць змесціва, але вы не можаце атрымаць вынікі, якія вы чакалі. Калі вы думаеце пра гэта, гэта мае сэнс, так як калі ваш кантэйнер элемент павінен ведаць шырыню яго даччыных элементаў для таго, каб вызначыць яго шырыню, напрыклад, калі ён не мае загадзя пэўную шырыню, і адзін або больш мае шырыня усталёўваецца як працэнт ад кантэйнера элемента, гэта стварае кругавую ланцуг без адказу. Калі вы выкарыстоўваеце працэнты для шырыня што-небудзь на дакуменце, вы павінны пераканацца, што шырыні бацькоўскага блока таксама вызначаны.