CSS padding er ein af eiginleikum CSS kassa líkanið . Þessi shorthand eign setur padding um allar fjórar hliðar HTML frumefni. CSS padding er hægt að beita á næstum hverju HTML tagi (að undanskildum sumum borðum). Að auki geta allir fjórar hliðar frumefnisins haft annað gildi.
CSS Padding Property
Til að nota styttri CSS padding eignina, getur þú notað Mnemonic "TRouBLe" (eða "TRiBbLe" fyrir þína Star Trek fans). Þetta stendur fyrir topp , hægri , neðst og vinstri , og það vísar til þess að púðarbreiddin sem þú setur í shorthand eigninni. Til dæmis:
padding: efst til hægri til vinstri; padding: 1px 2px 3px 6px;Ef þú notaðir gildin sem taldar eru upp hér að framan, myndi það gilda annað padding gildi fyrir hverja hlið af hvaða HTML þáttur þú ert að sækja um það. Ef þú vilt beita sömu púði á öllum fjórum hliðum geturðu einfaldað CSS og skrifað bara eitt gildi:
padding: 12px;Með þessari línu CSS, 12 punkta af padding myndi gilda um allar 4 hliðar frumefni.
Ef þú vilt að padding sé sú sama fyrir ofan og neðst og vinstri og hægri, getur þú skrifað tvö gildi:
padding: 24px 48px;Fyrsta gildi (24px) myndi gilda um topp og neðst, en seinni gildir um vinstri og hægri.
Ef þú skrifar þrjú gildi, þá verður það lárétt padding (vinstri og hægri) það sama, þegar þú breytir efst og neðst:
padding: efst til hægri og vinstri botn; padding: 0px 1px 3px;Samkvæmt CSS box líkaninu, padding er næst frumefni / efni sjálft. Þetta þýðir að padding er bætt við frumefni á milli innihaldsbreiddarinnar eða hæðina og hvaða landamæri sem þú notar. Ef padding er stillt á núll, þá hefur það sama brún og innihald.
CSS Padding gildi
CSS padding getur tekið hvaða gildi sem er ekki neikvætt. Vertu viss um að tilgreina mælinguna, svo sem px eða em. Þú getur einnig tilgreint hundraðshluta fyrir padding þinn, sem verður hlutfall af breiddum innihaldseiningarinnar. Þetta felur í sér efri og neðri púði. Til dæmis:
#container {width: 800px; hæð: 200px; } #container p {breidd: 400px; hæð: 75%; padding: 25% 0; }Hæð málsins inni í #container frumefni verður 75% af hæðinni #container auk 25% af breiddinni fyrir efsta púði og 25% af breiddinni fyrir botnplötu. Þetta samanstendur af 300 + 200 + 200 = 700px.
Áhrif að bæta við CSS Padding
Á blokkum stigum er púði beitt á fjórum hliðum. Vegna þess að þátturinn er blokk eða kassi þegar er púði sótt á kassann.
Þegar CSS púði er bætt við inline þætti getur verið að skarast nokkuð af þætti ofan og undir inline ef lóðrétt púði fer yfir línuhæðina, en það mun ekki ýta niður línuhæðinni. Lárétt CSS padding beitt á inline þættir verður bætt við upphaf frumefni og endir þáttarins. Og padding má vefja línur. En það mun ekki eiga við um alla línurnar í marglínuliður, svo þú getur ekki notað padding til að slá inn hluti af marglínuðu innihaldsefni.
Einnig, í CSS2.1, getur þú ekki búið til ílátsblokka þar sem breiddin fer eftir frumefni með prósentum fyrir breidd (eða púðarbreidd). Ef þú ert niðurstaðan er óskilgreint. Vafrar munu enn sýna innihald, en þú munt ekki fá þær niðurstöður sem þú ert að búast við. Ef þú hugsar um það, er það skynsamlegt, eins og ef ílátið þitt þarf að vita breidd barnaþáttanna til þess að skilgreina breidd sína - td þegar það er ekki með fyrirfram skilgreindan breidd og einn eða fleiri hefur Breidd sett sem hundraðshluti ílátseiningarinnar, setur þetta hringlaga keðju með ekkert svar. Ef þú notar prósentur fyrir breidd nokkuð á skjalinu þínu, þá ættirðu að ganga úr skugga um að einnig sé að skilgreina breidd foreldraþáttanna.