സി.എസ്. പാഡിംഗിന്റെ സംക്ഷിപ്ത അവലോകനം

സി.എസ്.എസ് ബോക്സ് മോഡലിന്റെ സ്വഭാവമാണ് സിഎസ്ഐ പാഡിംഗ് . ഈ ഷോർട്ട്ഹാൻഡ് പ്രോപ്പർട്ടി ഒരു HTML ഘടകത്തിന്റെ നാലു വശങ്ങളിലും ചുറ്റും പാഡിംഗ് സജ്ജമാക്കുന്നു. ഏതാണ്ട് എല്ലാ HTML ടാഗുകളിലേക്കും സിബിഎസ് പാഡിംഗ് പ്രയോഗിക്കാം (പട്ടികയുടെ ചില ടാഗുകൾ ഒഴികെ). കൂടാതെ, ഘടകത്തിന്റെ നാലു വശങ്ങളും വ്യത്യസ്തമായ മൂല്യമുള്ളതായിരിക്കണം.

CSS പാഡിംഗ് വസ്തു

ഷോർട്ട്ഹാൻഡ് CSS പാഡിംഗ് പ്രോപ്പർട്ടി ഉപയോഗിക്കുന്നതിന്, നിങ്ങൾക്ക് "ട്രൗബെലെ" (അല്ലെങ്കിൽ "ട്രൈബ്ബ്" എന്ന പേരിൽ സ്റ്റാർ ട്രെക്ക് ആരാധകർ) ഉപയോഗിക്കാൻ കഴിയും. ഇത് ടോപ്പ് , വലത് , അടിഭാഗം , ഇടത് എന്നിവയുടെ സൂചിപ്പിക്കുന്നു. ഷോർട്ട്ഹാൻഡ് പ്രോപ്പർട്ടികളിൽ നിങ്ങൾ സജ്ജമാക്കിയ പാതിംഗ് വീതികളുടെ ഓർഡർ ഇത് സൂചിപ്പിക്കുന്നു. ഉദാഹരണത്തിന്:

പാഡിംഗ്: മുകളിൽ വലത് അടിഭാഗം ശേഷിക്കുന്നു; പാഡിംഗ്: 1px 2px 3px 6px;

നിങ്ങൾ മുകളിൽ ലിസ്റ്റുചെയ്തിരിക്കുന്ന മൂല്യങ്ങൾ ഉപയോഗിച്ചിട്ടുണ്ടെങ്കിൽ, നിങ്ങൾ പ്രയോഗിക്കുന്ന ഏത് HTML ഘടകത്തിന്റെയും ഓരോ ഭാഗത്തും ഒരു വ്യത്യസ്ത പാഡിംഗ് മൂല്യം പ്രയോഗിക്കും. നിങ്ങൾക്ക് എല്ലാ വശങ്ങളിലും ഒരേ പാഡിൽ പ്രയോഗിക്കണമെങ്കിൽ, നിങ്ങൾ നിങ്ങളുടെ സി.എസ്.എസ് ലളിതമാക്കി ഒരു മൂല്യം എഴുതാം:

പാഡിംഗ്: 12px;

CSS ന്റെ ആ വരിയിലൂടെ പാഡിങ്ങിന്റെ 12 പിക്സലുകൾ മൂലകത്തിന്റെ എല്ലാ വശങ്ങളിലും പ്രയോഗിക്കാം.

മുകളിൽ വലത്, ഇടത്, ഇടത്, വലതു വശത്തായി നിങ്ങൾക്ക് പാഡിംഗ് വേണമെങ്കിൽ നിങ്ങൾക്ക് രണ്ട് മൂല്യങ്ങൾ എഴുതാം:

പാഡിംഗ്: 24px 48px;

ആദ്യത്തെ മൂല്ല്യം (24px) മുകളിലേക്കും താഴെയുള്ളതുമാണ്, രണ്ടാമത്തേത് ഇടത്തേയ്ക്കും വലത്തേയ്ക്കും പ്രയോഗിക്കും.

നിങ്ങൾ മൂന്നു മൂല്ല്യങ്ങൾ എഴുതുകയാണെങ്കിൽ, മുകളിലോട്ടും താഴെയുമായോ മാറുന്നതിനിടയിൽ അത് തിരശ്ചീനമായ പാഡിംഗ് (ഇടത്, വലത്) സൃഷ്ടിക്കും:

പാഡിംഗ്: മുകളിൽ വലത്-ഇടത് അടിഭാഗം; പാഡിംഗ്: 0px 1px 3px;

CSS ബോക്സ് മാതൃക പ്രകാരം, പാഡിംഗ് എന്നത് എലമെൻറിന് ഏറ്റവും അടുത്താണ്. ഇതിനർത്ഥം ഉള്ളടക്ക വിഡ്ത്ത് അല്ലെങ്കിൽ ഉയരം, നിങ്ങൾ ഉപയോഗിക്കുന്ന ഏതെങ്കിലും ഫോർമാറ്റ് മൂല്യങ്ങൾ എന്നിവയിൽ ഒരു ഘടകത്തിലേക്ക് പാഡിംഗ് ചേർത്തിരിക്കുന്നു എന്നാണ്. പാബിംഗ് പൂജ്യമായി സജ്ജമാക്കിയെങ്കിൽ, അതിന് ഉള്ളടക്കത്തിന്റെ അതേ വശമുണ്ട്.

CSS പാഡിംഗ് മൂല്യങ്ങൾ

CSS പാഡിംഗിന് നോൺ-നെഗറ്റീവ് ദൈർഘ്യ മൂല്യങ്ങൾ എടുക്കാം. Px അല്ലെങ്കിൽ em പോലുള്ള അളവ് വ്യക്തമാക്കുന്ന കാര്യം ഉറപ്പാക്കുക. നിങ്ങൾക്ക് നിങ്ങളുടെ പാഡിങ്ങിനുള്ള ഒരു ശതമാനം വ്യക്തമാക്കാം, അത് ഘടകത്തിലെ അടങ്ങുന്ന ബ്ലോക്കിലെ വീതിയുടെ ശതമാനമായിരിക്കും. മുകളിൽ, പാഡിംഗിനായി ഇത് ഉൾപ്പെടുന്നു. ഉദാഹരണത്തിന്:

#container {width: 800px; ഉയരം: 200px; } #container p {വീതി: 400px; ഉയരം: 75%; പാഡിംഗ്: 25% 0; }

#container എലമെന്റിനുള്ളിലെ ഖണ്ഡികയുടെ ഉയരം #container ന്റെ ഉയരം 75%, മുകളിൽ പാഡിങിനുള്ള 25% വീതിയും താഴെയുള്ള പാഡിങിനുള്ള വീതിയുടെ 25% വീതിയും. ഇത് 300 + 200 + 200 = 700px ആണ്.

CSS പാഡിംഗ് ചേർക്കുന്നതിനുള്ള ഫലങ്ങൾ

ബ്ലോക്ക്-ലെവൽ ഘടകങ്ങളിൽ , പാഡിൽ നാലു വശത്തും പ്രയോഗിക്കുന്നു. മൂലകം ഇതിനകം ഒരു ബ്ലോക്കുകളോ ബോക്സോ ആണെങ്കിൽ, പാഡിംഗ് ബോക്സിൽ പ്രയോഗിക്കുന്നു.

ഇൻലൈൻ ഘടകങ്ങളിലേക്ക് CSS പാഡിംഗ് ചേർക്കപ്പെടുമ്പോൾ, ലംബ പാഡിംഗ് ലൈൻ ഉയരം കവിഞ്ഞെങ്കിൽ ഇൻലൈൻ ഘടകം മുകളിലേയ്ക്കും താഴെയോ ഉള്ള ചില ഘടകങ്ങൾ ഓവർലാപ്പിംഗ് ആയിരിക്കാം, എന്നാൽ ഇത് ലൈൻ ഉയരം താഴേക്കില്ല. ഇൻലൈൻ ഘടകങ്ങളിൽ പ്രയോഗിച്ച തിരശ്ചീന CSS പാഡിംഗ് മൂലകത്തിൻറെ ആരംഭത്തിനും മൂലകത്തിന്റെ അവസാനത്തേക്കും ചേർക്കും. പാപ്പിംഗ് വരികൾ പൊതിയുക. എന്നാൽ ഇത് ഒരു മൾട്ടി-ലൈൻ ഘടകത്തിന്റെ എല്ലാ വരികളിലും പ്രയോഗിക്കില്ല, അതിനാൽ മൾട്ടി-ലൈൻ ഇൻലൈൻ ഉള്ളടക്കത്തിന്റെ ഒരു സെഗ്മെൻറ് ഇൻഡന്റ് ചെയ്യാൻ നിങ്ങൾക്ക് പാഡിംഗ് ഉപയോഗിക്കാൻ കഴിയില്ല.

കൂടാതെ, CSS2.1 ൽ, വീതിയും (അല്ലെങ്കിൽ പാഡിംഗ് വീതിയും) ഒരു വീതിയെ ആശ്രയിച്ച് കണ്ടെത്തുന്ന കണ്ടെയിനർ ബ്ലോക്കുകൾ നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയില്ല. നിങ്ങൾ ഫലമെന്താണെന്ന് വ്യക്തമാക്കാത്തത്. ബ്രൌസറുകൾ തുടർന്നും ഉള്ളടക്കങ്ങൾ പ്രദർശിപ്പിക്കും, എന്നാൽ നിങ്ങൾ പ്രതീക്ഷിക്കുന്ന ഫലങ്ങൾ നിങ്ങൾക്ക് ലഭിച്ചേക്കില്ല. നിങ്ങൾ അതിനെക്കുറിച്ച് ചിന്തിക്കുകയാണെങ്കിൽ, നിങ്ങളുടെ കണ്ടെയ്നർ ഘടകം അതിൻറെ വീതി നിർവചിക്കണമെങ്കിൽ, അതിന്റെ വീതി നിർവചിക്കണമെങ്കിൽ -അത് മുൻകൂട്ടി നിശ്ചയിച്ചിട്ടുള്ള വീതിയില്ലാത്തപ്പോൾ, ഒന്നോ അതിലധികമോ കണ്ടെയ്നർ ഘടകത്തിന്റെ ഒരു ശതമാനമായി ഒരു വിഡ്ത്ത് സെറ്റ്, ഇതിന് ഉത്തരങ്ങളില്ലാതെ ഒരു സർക്കുലർ ചെയിനെയാണ് സജ്ജീകരിക്കുന്നത്. നിങ്ങളുടെ ഡോക്യുമെൻറിൽ ഏതെങ്കിലും ഒന്നിൻറെയും അളവുകളിൽ ഉപയോഗിക്കുമ്പോൾ, പിതാവിനുള്ള ഘടകം അളവും നിർവചിക്കേണ്ടതുണ്ട്.