ഫോറങ്ങളിൽ ചുറ്റിക്കറങ്ങുമ്പോൾ, എന്താണ് ചെയ്യുന്നത് എന്ന ചോദ്യം ഇപ്പോഴും ഉയർന്നുവരുന്നു എന്ന വസ്തുത ഞാൻ കണ്ടു പാഡിംഗ്, പിന്നെ എന്ത് മാർജിൻ, അവ തമ്മിലുള്ള വ്യത്യാസങ്ങൾ എന്തൊക്കെയാണ്. അതുകൊണ്ടാണ് ഇത് നിങ്ങളെ ഓർമ്മിപ്പിക്കാൻ ഞാൻ തീരുമാനിച്ചത്. അതിനാൽ, അവലംബിക്കാതെ അമൂർത്തമായ വാക്യങ്ങൾനമുക്ക് പ്രശ്നം ഉന്നയിക്കുകയും എല്ലാം വ്യക്തമാകുന്ന ഒരു ഉദാഹരണം നോക്കുകയും ചെയ്യാം.

ടാസ്ക്: പേജിൽ എനിക്ക് ഒരു ചുവന്ന ബ്ലോക്ക് വേണം(200x200 പിക്സലുകൾ), ഏത് ബ്രൗസറിൻ്റെ അരികുകളിൽ നിന്ന് പിൻവാങ്ങുന്നുമുകളിലും ഇടത്തും യഥാക്രമം 40, 70 പിക്സലുകൾ, ഒപ്പം അതിനുള്ളിലെ വാചകം ഇടത്തോട്ടും മുകളിലോട്ടും ഇൻഡൻ്റ് ചെയ്തിരിക്കുന്നു 40 പിക്സലുകൾ കൊണ്ട്.

പരിഹാരം: ചിത്രവും കോഡും നോക്കുക. ഞങ്ങളുടെ ചുവന്ന ബ്ലോക്ക് 200 x 200 പിക്സലുകൾ കവിയാൻ പാടില്ല, അത് ബ്രൗസറിൻ്റെ അരികുകളിൽ നിന്ന് (അല്ലെങ്കിൽ മറ്റ് ഉള്ളടക്ക ബ്ലോക്കുകൾ) ഇൻഡൻ്റ് ചെയ്യണം. യഥാർത്ഥത്തിൽ, മാർജിൻ വഴിയാണ് ഞങ്ങൾ ഈ ഇൻഡൻ്റുകൾ ഉണ്ടാക്കുന്നത്. നമ്മൾ പാഡിംഗ് ചെയ്യുകയാണെങ്കിൽ, നമ്മുടെ ചുവന്ന ബ്ലോക്കിനുള്ളിൽ ഇൻഡൻ്റേഷൻ സംഭവിക്കുകയും ബ്ലോക്കിൻ്റെ പശ്ചാത്തലത്തിൽ തന്നെ (അതായത് ചുവപ്പ്) ഇൻഡൻ്റേഷൻ ലഭിക്കുകയും ചെയ്യുന്നു.

ഉപയോഗിച്ച പ്രോപ്പർട്ടികൾ കൂടാതെ (വരികൾ 6-9), മാർജിൻ-വലത്, പാഡിംഗ്-വലത്, മാർജിൻ-ബോട്ടം, പാഡിംഗ്-ബോട്ടം - അവ യഥാക്രമം വലതുഭാഗത്തും താഴെയുമായി ഇൻഡൻ്റേഷനുള്ളതാണ്. ഈ എല്ലാ പ്രോപ്പർട്ടികളുടെയും മൂല്യങ്ങൾ പിക്സലുകൾ (px), ശതമാനം (%), അല്ലെങ്കിൽ em യൂണിറ്റുകൾ എന്നിവയിലായിരിക്കാം.

തത്വത്തിൽ, അത്രമാത്രം. എന്നിരുന്നാലും, അവരോടൊപ്പം പ്രവർത്തിക്കുന്നതിൻ്റെ ചില സവിശേഷതകൾ ഇപ്പോഴും ഉണ്ട്.

മാർജിൻ, പാഡിംഗിൻ്റെ സവിശേഷതകൾ

പാഡിംഗ് ഉപയോഗിക്കുമ്പോൾ, പാഡിംഗിൻ്റെ അളവുകൾ ബ്ലോക്കിൻ്റെ ഉയരത്തിൽ നിന്നും വീതിയിൽ നിന്നും കുറയ്ക്കണം, അല്ലാത്തപക്ഷം ബ്ലോക്കിൻ്റെ വലുപ്പം പാഡിംഗിൻ്റെ വലുപ്പത്തിൽ വർദ്ധിക്കും.

ഒരു ബ്ലോക്കിന് ഓട്ടോയുടെ മാർജിൻ-ഇടത്, മാർജിൻ-വലത് മൂല്യങ്ങൾ നൽകിയിട്ടുണ്ടെങ്കിൽ, ബ്ലോക്കിന് ഒരു നിശ്ചിത വീതിയും (ഉദാഹരണത്തിന്, 400px) ഫ്ലോട്ട് CSS പ്രോപ്പർട്ടി ഇല്ലെങ്കിൽ, ഈ ബ്ലോക്ക് മധ്യഭാഗത്തേക്ക് വിന്യസിക്കും. അത് സ്ഥിതിചെയ്യുന്ന മൂലകത്തിൻ്റെ. യഥാർത്ഥത്തിൽ, കേന്ദ്ര വിന്യാസത്തോടുകൂടിയ നോൺ-റബ്ബർ ലേഔട്ടിന്, ഈ വിന്യാസ രീതി സാധാരണയായി ഉപയോഗിക്കുന്നു. IE 5.5 ഉം അതിനുമുമ്പും യാന്ത്രിക മൂല്യത്തെ പിന്തുണയ്ക്കുന്നില്ല എന്ന വസ്തുത ഉണ്ടായിരുന്നിട്ടും, ഇത് എല്ലായ്പ്പോഴും ഇത് ഉപയോഗിക്കുന്നതിൽ നിന്ന് നിങ്ങളെ തടയുന്നില്ല =).

പട്ടികകളിൽ പാഡിംഗും മാർജിനും ഉപയോഗിക്കുന്നത് ഉചിതമല്ല, കാരണം ഫലം പ്രവചനാതീതമായിരിക്കും. വ്യത്യസ്ത ബ്രൗസറുകൾ.

പിന്നെ അവസാനമായി ഞാൻ പറയാൻ ആഗ്രഹിച്ച കാര്യം. മാർജിൻ: 10px 0 5px 20px;. ഇൻഡൻ്റേഷൻ പൂജ്യമാണെങ്കിൽ, പാരാമീറ്ററുകൾ വ്യക്തമാക്കാതെ നിങ്ങൾക്ക് ഒരു പൂജ്യം ഇടാം. ഏത് പാരാമീറ്ററുകൾ ഏത് അതിർത്തിയുമായി ബന്ധപ്പെട്ടിരിക്കുന്നുവെന്ന് ഓർമ്മിക്കുന്നത് വളരെ എളുപ്പമാണ് - ഒരു ബ്ലോക്കിനായി, ഇൻഡൻ്റുകൾ ഘടികാരദിശയിൽ പോകുന്നു: ആദ്യ നമ്പർ മുകളിലാണ്, രണ്ടാമത്തേത് വലതുവശത്താണ്, മൂന്നാമത്തേത് താഴെയാണ്, നാലാമത്തേത് വിട്ടുപോയി.

സത്യത്തിൽ ഞാൻ ഇന്ന് നിങ്ങളോട് പറയാൻ ആഗ്രഹിച്ചത് അതാണ്. എല്ലാവർക്കും വാരാന്ത്യ ആശംസകൾ!

ഹലോ, പ്രിയ വായനക്കാരെബ്ലോഗ് സൈറ്റ്. ഇന്ന് ഞാൻ പഠന വിഷയം തുടരാനും ഇൻഡൻ്റുകളും ബോർഡറുകളും സജ്ജമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ആ ശൈലി നിയമങ്ങൾ പരിഗണിക്കാനും ആഗ്രഹിക്കുന്നു HTML ഘടകങ്ങൾ: അതിർത്തി, മാർജിൻ, പാഡിംഗ്.

ഇതിന് മുമ്പ്, ഫോണ്ടുകൾ (), ടെക്സ്റ്റ് () നിയന്ത്രിക്കുകയും മോഡൽ നോക്കുകയും ചെയ്യുന്ന വളരെ ലളിതമായ പ്രോപ്പർട്ടികൾ പഠിക്കാൻ ഞങ്ങൾക്ക് കഴിഞ്ഞു.

അതെ, ഉപയോഗത്തിൻ്റെ തത്വങ്ങൾ വിശദമായി പരിഗണിക്കാനും ഞങ്ങൾക്ക് കഴിഞ്ഞു (നിരവധി ലേഖനങ്ങളിൽ വിപുലീകരിക്കുന്നു). ഡോക്യുമെൻ്റുകൾ (വെബ് പേജുകൾ) നിർമ്മിക്കുന്നതിനുള്ള അടിസ്ഥാനമായ നിയമങ്ങളിലേക്ക് നീങ്ങേണ്ട സമയമാണിത്, ഞങ്ങൾ ബ്ലോക്ക് മോഡലിൽ (Html ​​ഘടകങ്ങളുടെ ബന്ധം) ആരംഭിക്കും.

IN പൊതുവായ രൂപരേഖആധുനികമായവയെക്കുറിച്ച് ഞാൻ ഇതിനകം എഴുതിയിട്ടുണ്ട്, എന്നാൽ ഇന്ന് നമ്മൾ ശുദ്ധമായ പ്രത്യേകതകളിലേക്ക് കടക്കും. നിങ്ങൾ ഒന്ന് നോക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ മുൻ പ്രസിദ്ധീകരണങ്ങൾവിഷയത്തിൽ, നിങ്ങൾക്ക് സ്വാഗതം.

CSS ലെ ബോക്സ് മോഡൽ - പാഡിംഗ്, മാർജിൻ, ബോർഡർ

മൂന്നാമതായി, പലിശ ഉപയോഗിക്കാം. അവ എന്തിൽ നിന്നാണ് കണക്കാക്കുന്നത്? അത് മാറുന്നു കണ്ടെയ്നർ വീതിയിൽ നിന്ന്(അതായത്, മാതൃ ഘടകത്തിൻ്റെ ഉള്ളടക്ക മേഖലയിൽ നിന്ന്). മാത്രമല്ല, ഇത് മാർജിൻ-വലത്, ഇടത് എന്നിവയ്ക്ക് മാത്രമല്ല, ലോജിക്കൽ ആയിരിക്കും, മാത്രമല്ല മാർജിൻ-മുകളിലും താഴെയും, കണ്ടെയ്നറിൻ്റെ വീതിയിൽ നിന്ന് (ഉയരം അല്ല) ശതമാനങ്ങൾ കൃത്യമായി കണക്കാക്കും.

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

ശരി, ഒരു പ്രീ ഫാബ്രിക്കേറ്റഡ് CSS മാർജിൻ റൂൾ ഉണ്ടെന്ന് പറയാതെ വയ്യ, അത് പല സന്ദർഭങ്ങളിലും ആവശ്യമായ ബാഹ്യ മാർജിനുകൾ സജ്ജമാക്കാൻ ഉപയോഗിക്കുന്ന കോഡിൻ്റെ വലുപ്പം കുറയ്ക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. അതിലെ മൂല്യങ്ങളുടെ ക്രമം കർശനമായി നിയന്ത്രിച്ചിരിക്കുന്നു (അവ എഴുതിയിരിക്കുന്നു ബഹിരാകാശ സ്വഭാവം) കൂടാതെ ഉദാഹരണവുമായി പൊരുത്തപ്പെടണം:

ആ. കണക്കെടുപ്പ് മുകളിൽ നിന്ന് ആരംഭിച്ച് തുടരുന്നു ഘടികാരദിശയിൽശരിയായ ഇൻഡൻ്റേഷൻ (വലത്) ഉപയോഗിച്ച് വൃത്തം പൂർത്തിയാകുന്നതുവരെ. ഇത് ഇതുപോലെ തോന്നാം:

മാർജിൻ:20px 10px 40px 30px;

ഞങ്ങളുടെ ബ്ലോക്കിന് മുകളിലുള്ള ബ്രൗസർ വലത് - 10, താഴെ - 40, ഇടതുവശത്ത് - 30 എന്നിങ്ങനെ 20 പിക്സലുകൾ ഇൻഡൻ്റ് ചെയ്യണം എന്നാണ് ഇതിനർത്ഥം. ഈ എൻട്രി ഇതിന് തുല്യമായിരിക്കും:

CSS കോഡിൻ്റെ കുറവ് നഗ്നനേത്രങ്ങൾക്ക് ദൃശ്യമാണ്. എന്നാൽ ഇത് പരിധിയല്ല. ഒരു പ്രീ ഫാബ്രിക്കേറ്റഡ് റൂളിൽ നാല് മാത്രമല്ല, മൂന്ന്, രണ്ട്, ഒരു മൂല്യം പോലും ഉപയോഗിക്കുന്നത് തികച്ചും സ്വീകാര്യമാണ്. ഇത് കോഡിൻ്റെ വലുപ്പം കുറയ്ക്കാൻ സഹായിക്കും. എന്നിരുന്നാലും, ചില സന്ദർഭങ്ങളിൽ മാത്രമേ മൂല്യങ്ങളുടെ എണ്ണം കുറയ്ക്കാൻ കഴിയൂ:

1. ഇടതും വലതും ഉള്ള അരികുകൾ ഒന്നുതന്നെയാണെങ്കിൽ, ഉദാഹരണത്തിന്, ഇതുപോലെ: margin:20px 30px 40px 30px;

   അവസാനത്തേത് ഒഴിവാക്കാം:

   മാർജിൻ:20px 30px 40px;

   ഈ രണ്ട് പ്രീഫാബ് റൂൾ എൻട്രികളും ഒരേ കാര്യം ചെയ്യുന്നു. അതിനാൽ, മാർജിനിൽ മൂന്ന് മൂല്യങ്ങളുള്ള ഒരു എൻട്രി നിങ്ങൾ കാണുകയാണെങ്കിൽ, നാലാമത്തേതിൻ്റെ (വലതുവശത്ത്) മൂല്യം രണ്ടാമത്തേതിൽ (ഇടതുവശത്ത്) കാണാൻ കഴിയും.

   മുകളിലും താഴെയുമുള്ള ഇൻഡൻ്റേഷനുകൾ തുല്യമാണെങ്കിൽ, അത്തരമൊരു ട്രിക്ക് മേലിൽ പ്രവർത്തിക്കില്ല, കാരണം യുക്തിപരമായി ഒരു പ്രീ ഫാബ്രിക്കേറ്റഡ് റൂളിൻ്റെ എൻട്രിയുടെ ഘടന കുറയ്ക്കാൻ കഴിയും, മാത്രം അതിൻ്റെ അവസാനത്തിൽ നിന്ന് തനിപ്പകർപ്പ് മൂല്യങ്ങൾ മുറിക്കുക(താഴത്തെ ഇൻഡൻ്റിൻ്റെ മൂല്യം രണ്ടാമത്തേത് മുതൽ അവസാനം വരെ ആയിരിക്കും).

2. ഇടതും വലതും ഉള്ള ബാഹ്യ മാർജിനുകളുടെ തുല്യതയ്‌ക്ക് പുറമേ, മുകളിലും താഴെയുമായി അവയുടെ മൂല്യങ്ങളുടെ തുല്യതയുണ്ടെങ്കിൽ: മാർജിൻ: 20px 30px 20px 30px;

   അല്ലെങ്കിൽ, അത് സമാനമാണ് (പോയിൻ്റ് 1 കാരണം):

   മാർജിൻ:20px 30px 20px;

   അത്തരമൊരു മുൻകൂട്ടി തയ്യാറാക്കിയ നിയമം രണ്ട് മൂല്യങ്ങൾ മാത്രം ഉപയോഗിച്ച് എഴുതാം, അവസാനത്തേത് നിരസിച്ചു, അത് ആദ്യത്തേതുമായി യോജിക്കുന്നു:

   മാർജിൻ:20px 30px;

3. ഈ സാഹചര്യത്തിൽ, ആദ്യ മൂല്യം ബാഹ്യ മാർജിനുകളെ ലംബമായും രണ്ടാമത്തേത് - തിരശ്ചീനമായും വിവരിക്കുന്നു.

   അവസാനമായി, പ്രീഫാബ് റൂളിലെ എല്ലാ മൂല്യങ്ങളും ഒന്നുതന്നെയാണെങ്കിൽ: മാർജിൻ: 20px 20px 20px 20px;

   അല്ലെങ്കിൽ, അത് സമാനമാണ് (പോയിൻ്റ് 2 കാരണം):

   മാർജിൻ:20px 20px; അത് ഉപയോഗിക്കാംപരമാവധി ചുരുക്കിയ റെക്കോർഡ് തരം (നിരസിക്കുന്നുഅവസാന മൂല്യം

   ആദ്യത്തേതുമായി പൊരുത്തപ്പെടുന്നു):

മാർജിൻ:20px; ഇത് ഞങ്ങളുടെ Html ഘടകത്തിൻ്റെ എല്ലാ വശങ്ങളിലും ഒരേ മാർജിൻ ആയിരിക്കും അർത്ഥമാക്കുന്നത്.ബാഹ്യ മാർജിനുകളെക്കുറിച്ച് പറയുമ്പോൾ, അത്തരമൊരു സ്കീം പരാമർശിക്കേണ്ടതാണ്

"മാർജിൻ-തകർച്ച" അല്ലെങ്കിൽ, മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, "മാർജിൻ തകർച്ച." ചുരുക്കത്തിൽ, ഈ പ്രതിഭാസത്തിൻ്റെ സാരാംശം ഇപ്രകാരമാണ്.നമുക്ക് രണ്ട് ബ്ലോക്കുകൾ പരസ്പരം കീഴിലാണെങ്കിൽ (മാർജിനുകളുടെ തകർച്ച ലംബമായി മാത്രമേ സംഭവിക്കൂ) കൂടാതെ അവ രണ്ടിനും വിപരീത ബാഹ്യ മാർജിനുകൾ സജ്ജീകരിച്ചിരിക്കുന്നു (ഉദാഹരണത്തിന്, ചുവടെയുള്ള ഒന്ന്

ഉദാഹരണത്തിന്, മുകളിലെ ബ്ലോക്ക് ഇതായി സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ:

മാർജിൻ:20px 20px 200px 20px;

താഴെയുള്ളവയ്ക്ക്:

മാർജിൻ:100px 20px 20px 20px;

അപ്പോൾ മുകളിലെ ബ്ലോക്കിൻ്റെ താഴത്തെ മാർജിൻ (200px) താഴത്തെ ഒന്നിൻ്റെ മുകളിലെ മാർജിൻ ആഗിരണം ചെയ്യും (100px, അത് 199px ന് തുല്യമായാലും, ഒന്നും മാറില്ല) കൂടാതെ ഈ രണ്ട് ബ്ലോക്കുകൾക്കിടയിലുള്ള ബാഹ്യ മാർജിൻ ഇപ്പോഴും തുല്യമായിരിക്കും. 200px. ആ. വലുത് മാത്രം കണക്കിലെടുക്കുന്നുമോഡുലോ മാർജിൻ, ലംബമായി തൊട്ടടുത്തുള്ള മൂലകത്തിൻ്റെ കൌണ്ടർ മൂല്യവുമായി ഇത് ഒരു തരത്തിലും ചേർക്കുന്നില്ല.

ഇത് ലംബമായി മാത്രം പ്രവർത്തിക്കുന്ന ഒരു ക്യാച്ചാണ്, കൂടാതെ തിരശ്ചീനമായി, എതിർ മാർജിൻ അളവുകൾ പരസ്പരം ചേർക്കും. എന്നാൽ ഇത് ഒരേ ചിഹ്നമുള്ള മാർജിനുകൾക്ക് മാത്രമേ ബാധകമാകൂ, എന്നാൽ അവ ഒപ്പമുണ്ടെങ്കിൽ വ്യത്യസ്ത അടയാളങ്ങൾ, അപ്പോൾ അവയുടെ സംഖ്യകൾ ലളിതമായി കൂട്ടിച്ചേർക്കുകയും തത്ഫലമായുണ്ടാകുന്ന മൂല്യത്താൽ ബ്ലോക്കുകൾ പരസ്പരം വേർതിരിക്കപ്പെടുകയും ചെയ്യും.

ഉദാഹരണത്തിന്, ഈ സാഹചര്യത്തിൽ:

മുകളിലെ മാർജിൻ:20px 20px -20px 20px;

താഴെയുള്ള മാർജിൻ:10px 20px 20px 20px; ബ്ലോക്കുകൾക്കിടയിലുള്ള ഫലമായുണ്ടാകുന്ന മാർജിൻ -10px ആയിരിക്കും, അതായത്. താഴെയുള്ള ഒന്ന് 10px ഓവർലാപ്പ് ചെയ്യുംമുൻനിര HTML

ഘടകം. CSS-ൽ മാർജിൻ റൂൾ ഉപയോഗിക്കുന്നതിൻ്റെ മറ്റൊരു സവിശേഷത, നിർദ്ദിഷ്ട മൂല്യമാണ്ഇൻലൈൻ ഘടകങ്ങൾക്ക് ലംബമായത് അവഗണിക്കപ്പെട്ടിരിക്കുന്നു

. ചോദിക്കുന്നതിലൂടെ:

മാർജിൻ:20px;

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

മറ്റ് അയൽ ഘടകങ്ങളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ.

ഒരു ബ്ലോക്ക് ടാഗിൻ്റെ കാര്യത്തിൽ (തലക്കെട്ടുകൾ, ഖണ്ഡികകൾ), ലംബമായ പാഡിംഗ് വർദ്ധിപ്പിക്കുന്നത് ഈ ഘടകത്തെ മറ്റ് അടുത്തുള്ള ബ്ലോക്കുകളുമായി താരതമ്യപ്പെടുത്തും.

ശരി, ഫ്രെയിമിന് (അതിർത്തി), അല്ലെങ്കിൽ അതിൻ്റെ വീതി, ലൈൻ ടാഗിൽ നിന്ന് മറ്റ് അടുത്തുള്ള ബ്ലോക്കുകളെ ലംബമായി നീക്കാൻ കഴിയില്ല. ഇൻലൈൻ ഘടകങ്ങൾക്ക്, ചലനം ഒരു ദിശയിൽ മാത്രമേ സാധ്യമാകൂ - തിരശ്ചീനമായി, അത്രമാത്രം.

പാഡിംഗും ബോർഡറും - ആന്തരിക പാഡിംഗും ഫ്രെയിമുകളും

നമുക്ക് ഇപ്പോൾ പാഡിംഗ് റൂൾ ഉപയോഗിച്ച് പാഡിംഗ് സജ്ജീകരിക്കുന്നതിലേക്ക് പോകാം, അതിന് എന്ത് മൂല്യങ്ങൾ എടുക്കാമെന്ന് നോക്കാം: നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഇവിടെ യാന്ത്രികത്തെക്കുറിച്ച് പരാമർശമില്ല, കൂടാതെ ഈ CSS നിയമം നെഗറ്റീവ് മൂല്യങ്ങൾ ഉപയോഗിക്കാൻ അനുവദിക്കുന്നില്ല (അവ പോസിറ്റീവ് ആയിരിക്കാം - പൂജ്യത്തിൽ നിന്നും അതിനുമുകളിലും). ആ. കൂടെപാഡിംഗ് ഉപയോഗിക്കുന്നു

അതിലെ ശതമാനങ്ങൾ മാർജിനിലെ പോലെ തന്നെ കണക്കാക്കുന്നു - നമ്മുടെ മൂലകം ഉൾപ്പെടുത്തിയിരിക്കുന്ന കണ്ടെയ്‌നറിൻ്റെ വീതിയുമായി (മാതൃഘടകത്തിൻ്റെ ഉള്ളടക്ക വിസ്തീർണ്ണം) ആപേക്ഷികം. Css-ലെ കോമ്പോസിറ്റ് പാഡിംഗ് റൂൾമുകളിൽ ചർച്ച ചെയ്ത അതേ നിയമങ്ങൾ രൂപീകരിക്കുകയും അനുസരിക്കുകയും ചെയ്യുന്നു:

പാഡിംഗ്:20px 10px 40px 30px;

ഈ നിയമത്തിൽ, മുകളിൽ നിന്ന് ആരംഭിച്ച്, ഞങ്ങൾ നാല് വശങ്ങളും വിവരിക്കുന്നു. നിങ്ങൾക്ക് അതിൽ എന്തെങ്കിലും കുറയ്ക്കണമെങ്കിൽ (മൂന്നോ രണ്ടോ അല്ലെങ്കിൽ ഒരു മൂല്യമോ വരെ), ബാഹ്യ ഇൻഡൻ്റുകൾക്ക് മുകളിൽ വിവരിച്ച റിഡക്ഷൻ തത്വങ്ങൾ നിങ്ങൾ ഉപയോഗിക്കേണ്ടതുണ്ട്, അത് ആന്തരികവയ്ക്ക് അതേ വിജയത്തോടെ പ്രവർത്തിക്കും.

ഇന്ന് ഞാൻ പരിഗണിക്കാൻ ആഗ്രഹിക്കുന്ന അവസാന കാര്യം, ഉപയോഗിച്ച് സജ്ജീകരിച്ചിരിക്കുന്ന ചട്ടക്കൂടാണ് അതിർത്തി. അവർക്ക് മൂന്ന് തരം പാരാമീറ്ററുകൾ ഉണ്ട്:

1. ബോർഡർ വീതി - അതിർത്തിയുടെ കനം സജ്ജമാക്കുന്നു
2. ബോർഡർ-വർണ്ണം - അതിൻ്റെ നിറം സജ്ജമാക്കുന്നു
3. ബോർഡർ-സ്റ്റൈൽ - ഫ്രെയിമിൻ്റെ തരം അല്ലെങ്കിൽ അത് വരയ്ക്കുന്ന വരയുടെ തരം

ഈ മൂന്ന് CSS നിയമങ്ങൾക്കും ഒരു സാധുവായ മൂല്യങ്ങളുണ്ട്:

ഫ്രെയിമിനുള്ള ലൈൻ വീതി ( ബോർഡർ വീതി) Em, Ex അല്ലെങ്കിൽ Px എന്നതിലെ സംഖ്യകൾ ഉപയോഗിച്ചോ വാക്കുകളിലോ വ്യക്തമാക്കാം:

1. നേർത്ത - നേർത്ത വര;
2. ഇടത്തരം - ശരാശരി ( നൽകിയ മൂല്യംസ്ഥിരസ്ഥിതിയായി ഉപയോഗിക്കുന്നു);
3. കട്ടിയുള്ള - കട്ടിയുള്ള.

ബോർഡർ വീതി:2px;

ഫ്രെയിമിൻ്റെ നിറത്തിൻ്റെ മൂല്യമായി ( ബോർഡർ-വർണ്ണം) അവ വ്യക്തമാക്കുന്നതിന് നിങ്ങൾക്ക് അംഗീകൃത രീതികൾ ഉപയോഗിക്കാം ( ഹെക്സാഡെസിമൽ കോഡ്, വാക്കുകൾ മുതലായവ):

ബോർഡർ-വർണം:ചുവപ്പ്;

സ്ഥിരസ്ഥിതിയായി, ബോർഡർ നിറം വ്യക്തമായി വ്യക്തമാക്കിയിട്ടില്ലെങ്കിൽ, മൂലകത്തിനുള്ളിലെ ഫോണ്ടിനായി ഉപയോഗിക്കുന്ന ഒന്ന് ഉപയോഗിക്കും.
ബോർഡർ ശൈലിയിലുള്ള CSS പ്രോപ്പർട്ടി നിങ്ങളെ വാക്കുകളിൽ ബോർഡർ തരം വ്യക്തമാക്കാൻ അനുവദിക്കുന്നു:

1. ഒന്നുമില്ല - ഫ്രെയിം ഇല്ല (ഡിഫോൾട്ട്)
2. ഡോട്ടഡ് - ലൈൻ ഡോട്ടുകളിൽ വരച്ചിരിക്കുന്നു
3. ഡാഷ്ഡ് - ഡോട്ട് ലൈൻ
4. സോളിഡ് - സോളിഡ് ലൈൻ
5. ഇരട്ട - ഇരട്ട വരി
6. ഗ്രോവ് - ഡിപ്രെസ്ഡ് ഫ്രെയിം
7. റിഡ്ജ് - നീണ്ടുനിൽക്കുന്ന
8. ഇൻസെറ്റും ഔട്ട്‌സെറ്റും - ഷാഡോ ഗെയിമുകൾ

സ്വാഭാവികമായും, ഏത് ബ്ലോക്കിനും നാല് വശങ്ങൾ ഉള്ളതിനാൽ, അത് ഉപയോഗിക്കാം പൊതു നിയമങ്ങൾ, ഓരോ വശത്തിനും വേർതിരിക്കുക:

എന്നതിനും ഇത് ബാധകമാകും മുൻകൂട്ടി തയ്യാറാക്കിയ ബോർഡർ നിയമങ്ങൾ- ഇത് എല്ലാ വശങ്ങളിലും ഒരേസമയം (ബോർഡർ), ഓരോ വശത്തിനും വെവ്വേറെ (ബോർഡർ-മുകളിൽ, ഇടത്, താഴെ, വലത്) എന്നിവ വ്യക്തമാക്കാം. മൂല്യങ്ങളുടെ ക്രമം പ്രധാനമല്ല:

ബോർഡർ:1px ഖര ചുവപ്പ്;

നിങ്ങൾക്ക് എന്തെങ്കിലും നഷ്ടമായാൽ, പകരം സ്ഥിര മൂല്യം ഉപയോഗിക്കും.

നിങ്ങൾക്ക് ആശംസകൾ! ബ്ലോഗ് സൈറ്റിൻ്റെ പേജുകളിൽ ഉടൻ കാണാം

എന്നതിൽ പോയി നിങ്ങൾക്ക് കൂടുതൽ വീഡിയോകൾ കാണാൻ കഴിയും

");">

നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടാകാം

ഉയരം, വീതി, ഓവർഫ്ലോ - CSS നിയമങ്ങൾബ്ലോക്ക് ലേഔട്ടിലെ ഒരു ഉള്ളടക്ക മേഖലയെ വിവരിക്കാൻ
സ്ഥാനം (കേവലവും ആപേക്ഷികവും സ്ഥിരവും) - CSS-ൽ Html ഘടകങ്ങൾ സ്ഥാപിക്കുന്നതിനുള്ള വഴികൾ ( ഇടത് നിയമങ്ങൾ, വലത്, മുകളിൽ, താഴെ) വ്യത്യസ്ത ഡിസൈനുകൾആന്തരിക കൂടാതെ ബാഹ്യ ലിങ്കുകൾ CSS വഴി
CSS-ൽ ഫ്ലോട്ടുചെയ്‌ത് മായ്‌ക്കുക - ബ്ലോക്ക് ലേഔട്ട് ടൂളുകൾ
CSS-ൽ പ്രദർശിപ്പിക്കുക (ബ്ലോക്ക്, ഒന്നുമില്ല, ഇൻലൈൻ) - വെബ് പേജിലെ Html ഘടകങ്ങളുടെ പ്രദർശന തരം സജ്ജമാക്കുക

ലേഖനങ്ങൾ ഐടി കുറിപ്പുകൾ HTML&CSS നമുക്ക് എന്നെന്നേക്കുമായി ഓർക്കാം: മാർജിനും പാഡിംഗും തമ്മിലുള്ള വ്യത്യാസം എന്താണ്
ഫോറങ്ങളിൽ ചുറ്റിക്കറങ്ങുമ്പോൾ, എന്താണ് ചെയ്യുന്നത് എന്ന ചോദ്യം ഇപ്പോഴും ഉയർന്നുവരുന്നു എന്ന വസ്തുത ഞാൻ കണ്ടു പാഡിംഗ്, പിന്നെ എന്ത് മാർജിൻ, അവ തമ്മിലുള്ള വ്യത്യാസങ്ങൾ എന്തൊക്കെയാണ്. അതുകൊണ്ടാണ് ഇത് നിങ്ങളെ ഓർമ്മിപ്പിക്കാൻ ഞാൻ തീരുമാനിച്ചത്. അതിനാൽ, അമൂർത്തമായ ശൈലികൾ അവലംബിക്കാതെ, നമുക്ക് പ്രശ്നം ഉന്നയിക്കുകയും എല്ലാം വ്യക്തമാകുന്ന ഒരു ഉദാഹരണം നോക്കുകയും ചെയ്യാം.
ടാസ്ക്: പേജിൽ എനിക്ക് ഒരു ചുവന്ന ബ്ലോക്ക് വേണം(200x200 പിക്സലുകൾ), ഏത് ബ്രൗസറിൻ്റെ അരികുകളിൽ നിന്ന് പിൻവാങ്ങുന്നുമുകളിലും ഇടത്തും യഥാക്രമം 40, 70 പിക്സലുകൾ, ഒപ്പം അതിനുള്ളിലെ വാചകം ഇടത്തോട്ടും മുകളിലോട്ടും ഇൻഡൻ്റ് ചെയ്തിരിക്കുന്നു 40 പിക്സലുകൾ കൊണ്ട്.
പരിഹാരം: ചിത്രവും കോഡും നോക്കുക. ഞങ്ങളുടെ ചുവന്ന ബ്ലോക്ക് 200 x 200 പിക്സലുകൾ കവിയാൻ പാടില്ല, അത് ബ്രൗസറിൻ്റെ അരികുകളിൽ നിന്ന് (അല്ലെങ്കിൽ മറ്റ് ഉള്ളടക്ക ബ്ലോക്കുകൾ) ഇൻഡൻ്റ് ചെയ്യണം. യഥാർത്ഥത്തിൽ, മാർജിൻ വഴിയാണ് ഞങ്ങൾ ഈ ഇൻഡൻ്റുകൾ ഉണ്ടാക്കുന്നത്. നമ്മൾ പാഡിംഗ് ചെയ്യുകയാണെങ്കിൽ, നമ്മുടെ ചുവന്ന ബ്ലോക്കിനുള്ളിൽ ഇൻഡൻ്റേഷൻ സംഭവിക്കുകയും ബ്ലോക്കിൻ്റെ പശ്ചാത്തലത്തിൽ തന്നെ (അതായത് ചുവപ്പ്) ഇൻഡൻ്റേഷൻ ലഭിക്കുകയും ചെയ്യുന്നു.

200?"200px":""+(this.scrollHeight+5)+"px");">

ഉപയോഗിച്ച പ്രോപ്പർട്ടികൾ കൂടാതെ (വരികൾ 6-9), മാർജിൻ-വലത്, പാഡിംഗ്-വലത്, മാർജിൻ-ബോട്ടം, പാഡിംഗ്-ബോട്ടം - അവ യഥാക്രമം വലതുഭാഗത്തും താഴെയുമായി ഇൻഡൻ്റേഷനുള്ളതാണ്. ഈ എല്ലാ പ്രോപ്പർട്ടികളുടെയും മൂല്യങ്ങൾ പിക്സലുകൾ (px), ശതമാനം (%), അല്ലെങ്കിൽ em യൂണിറ്റുകൾ എന്നിവയിലായിരിക്കാം.
തത്വത്തിൽ, അത്രമാത്രം. എന്നിരുന്നാലും, അവരോടൊപ്പം പ്രവർത്തിക്കുന്നതിൻ്റെ ചില സവിശേഷതകൾ ഇപ്പോഴും ഉണ്ട്.

മാർജിൻ, പാഡിംഗിൻ്റെ സവിശേഷതകൾ

ബ്ലോക്കുകൾക്ക് ഒരു CSS ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഉണ്ടെങ്കിൽ, നിങ്ങൾ ബ്ലോക്കുകളിലേക്ക് ഡിസ്പ്ലേ:ഇൻലൈൻ നൽകേണ്ടതുണ്ട്, അതുവഴി ഇടത്തും വലത്തും ഇരട്ട മാർജിനുകൾ ഉണ്ടാകില്ല (കൂടുതൽ വിവരങ്ങൾക്ക്, ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ 6-മായി എങ്ങനെ ചങ്ങാത്തം കൂടാം എന്ന ലേഖനം കാണുക. CSS മാർജിൻ പ്രോപ്പർട്ടി?)

പാഡിംഗ് ഉപയോഗിക്കുമ്പോൾ, പാഡിംഗിൻ്റെ അളവുകൾ ബ്ലോക്കിൻ്റെ ഉയരത്തിൽ നിന്നും വീതിയിൽ നിന്നും കുറയ്ക്കണം, അല്ലാത്തപക്ഷം ബ്ലോക്കിൻ്റെ വലുപ്പം പാഡിംഗിൻ്റെ വലുപ്പത്തിൽ വർദ്ധിക്കും.

ഒരു ബ്ലോക്കിന് ഓട്ടോയുടെ മാർജിൻ-ഇടത്, മാർജിൻ-വലത് മൂല്യങ്ങൾ നൽകിയിട്ടുണ്ടെങ്കിൽ, ബ്ലോക്കിന് ഒരു നിശ്ചിത വീതിയും (ഉദാഹരണത്തിന്, 400px) ഫ്ലോട്ട് CSS പ്രോപ്പർട്ടി ഇല്ലെങ്കിൽ, ഈ ബ്ലോക്ക് മധ്യഭാഗത്തേക്ക് വിന്യസിക്കും. അത് സ്ഥിതിചെയ്യുന്ന മൂലകത്തിൻ്റെ. യഥാർത്ഥത്തിൽ, കേന്ദ്ര വിന്യാസത്തോടുകൂടിയ നോൺ-റബ്ബർ ലേഔട്ടിന്, ഈ വിന്യാസ രീതി സാധാരണയായി ഉപയോഗിക്കുന്നു. IE 5.5 ഉം അതിനുമുമ്പും യാന്ത്രിക മൂല്യത്തെ പിന്തുണയ്ക്കുന്നില്ല എന്ന വസ്തുത ഉണ്ടായിരുന്നിട്ടും, ഇത് എല്ലായ്പ്പോഴും ഇത് ഉപയോഗിക്കുന്നതിൽ നിന്ന് നിങ്ങളെ തടയുന്നില്ല =).

ടേബിളുകളിൽ പാഡിംഗും മാർജിനും ഉപയോഗിക്കുന്നത് അഭികാമ്യമല്ല, കാരണം വ്യത്യസ്ത ബ്രൗസറുകളിൽ പ്രഭാവം പ്രവചനാതീതമായിരിക്കും.
പിന്നെ അവസാനമായി ഞാൻ പറയാൻ ആഗ്രഹിച്ച കാര്യം. മാർജിൻ: 10px 0 5px 20px;. ഇൻഡൻ്റേഷൻ പൂജ്യമാണെങ്കിൽ, പാരാമീറ്ററുകൾ വ്യക്തമാക്കാതെ നിങ്ങൾക്ക് ഒരു പൂജ്യം ഇടാം. ഏത് പാരാമീറ്ററുകൾ ഏത് അതിർത്തിയുമായി ബന്ധപ്പെട്ടിരിക്കുന്നുവെന്ന് ഓർമ്മിക്കുന്നത് വളരെ എളുപ്പമാണ് - ഒരു ബ്ലോക്കിനായി, ഇൻഡൻ്റുകൾ ഘടികാരദിശയിൽ പോകുന്നു: ആദ്യ നമ്പർ മുകളിലാണ്, രണ്ടാമത്തേത് വലതുവശത്താണ്, മൂന്നാമത്തേത് താഴെയാണ്, നാലാമത്തേത് വിട്ടുപോയി.
സത്യത്തിൽ ഞാൻ ഇന്ന് നിങ്ങളോട് പറയാൻ ആഗ്രഹിച്ചത് അതാണ്. എല്ലാവർക്കും വാരാന്ത്യ ആശംസകൾ!
+

ഈ വിഷയത്തിൽ നിങ്ങൾക്ക് മെറ്റീരിയലിനെക്കുറിച്ച് ഒരു ചോദ്യം ചോദിക്കാം.

വിവരണം

മൂലകത്തിൻ്റെ ഓരോ അരികിൽ നിന്നും പാഡിംഗിൻ്റെ അളവ് സജ്ജമാക്കുന്നു. മാർജിൻ എന്നത് നിലവിലെ മൂലകത്തിൻ്റെ അതിർത്തിയിൽ നിന്ന് അതിൻ്റെ മാതൃ ഘടകത്തിൻ്റെ ആന്തരിക അതിർത്തിയിലേക്കുള്ള ഇടമാണ് (ചിത്രം 1).

അരി. 1. മൂലകത്തിൻ്റെ ഇടതുവശത്ത് നിന്ന് ഇൻഡൻ്റ് ചെയ്യുക

ഘടകത്തിന് രക്ഷിതാവ് ഇല്ലെങ്കിൽ, പാഡിംഗ് എന്നത് എലമെൻ്റിൻ്റെ അരികിൽ നിന്ന് ബ്രൗസർ വിൻഡോയുടെ അരികിലേക്കുള്ള ദൂരമായിരിക്കും, വിൻഡോയിൽ തന്നെ സ്ഥിരസ്ഥിതിയായി പാഡിംഗ് സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് കണക്കിലെടുക്കുന്നു. അവ ഒഴിവാക്കുന്നതിന്, നിങ്ങൾ സെലക്ടറിനായി മാർജിൻ മൂല്യം സജ്ജമാക്കണം പൂജ്യത്തിന് തുല്യം.

ഒരു മൂലകത്തിൻ്റെ എല്ലാ വശങ്ങൾക്കും ഒരേസമയം മാർജിൻ മൂല്യം സജ്ജീകരിക്കാനോ നിർദ്ദിഷ്ട വശങ്ങൾക്ക് മാത്രം നിർവചിക്കാനോ മാർജിൻ പ്രോപ്പർട്ടി നിങ്ങളെ അനുവദിക്കുന്നു.

വാക്യഘടന

മാർജിൻ: [മൂല്യം | പലിശ | ഓട്ടോ] (1,4) | അനന്തരാവകാശം

മൂല്യങ്ങൾ

ഒരു സ്‌പെയ്‌സ് കൊണ്ട് വേർതിരിച്ച് നിങ്ങൾക്ക് ഒന്നോ രണ്ടോ മൂന്നോ നാലോ മൂല്യങ്ങൾ ഉപയോഗിക്കാം. പ്രഭാവം മൂല്യങ്ങളുടെ എണ്ണത്തെ ആശ്രയിച്ചിരിക്കുന്നു, അത് പട്ടികയിൽ കാണിച്ചിരിക്കുന്നു. 1.

ഇൻഡൻ്റേഷൻ്റെ അളവ് പിക്സലുകൾ (px), ശതമാനം (%) അല്ലെങ്കിൽ മറ്റ് സ്വീകാര്യമായ മൂല്യങ്ങൾ എന്നിവയിൽ വ്യക്തമാക്കാം. CSS യൂണിറ്റുകൾ. മൂല്യം പോസിറ്റീവ് അല്ലെങ്കിൽ നെഗറ്റീവ് സംഖ്യ ആകാം.

ഇൻഡൻ്റ് വലുപ്പം ബ്രൗസർ സ്വയമേവ കണക്കാക്കുമെന്ന് സ്വയമേവ വ്യക്തമാക്കുന്നു.

അനന്തരാവകാശം മാതാപിതാക്കളുടെ മൂല്യം അവകാശമാക്കുന്നു.

ലോറെം ഇപ്‌സം ഡോളർ സിറ്റ് അമെറ്റ്, കൺസെക്റ്റ്യൂവർ അഡിപിസ്സിംഗ് എലിറ്റ്, സെഡ് ഡൈം നോൺയുമി നിബ്ഹ് യൂയിസ്‌മോഡ് ടിൻസിഡൻ്റ് യുട്ട് ലാക്രീറ്റ് ഡോളോർ മാഗ്ന അലിഗ്വാം എററ്റ് വോലുട്ട്പറ്റ്. Ut wisis enim ad minim veniam, quis nostrud വ്യായാമം ട്യൂഷൻ ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

ഈ ഉദാഹരണത്തിൻ്റെ ഫലം ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്നു. 2.

അരി. 2. മാർജിൻ പ്രോപ്പർട്ടി പ്രയോഗിക്കുന്നു

ഒബ്ജക്റ്റ് മോഡൽ

document.getElementById("elementID ").style.margin

ബ്രൗസറുകൾ 6 കോംപാറ്റിബിലിറ്റി മോഡിൽ (ക്വിർക്ക് മോഡ്) മാർജിൻ: 0 ഓട്ടോ റൂൾ ഉപയോഗിച്ച് ബ്ലോക്ക് കേന്ദ്രീകരിക്കുന്നത് പിന്തുണയ്ക്കുന്നില്ല. പാരൻ്റ് എലമെൻ്റുകൾക്കുള്ളിൽ നെസ്റ്റഡ് ചെയ്ത ഫ്ലോട്ടഡ് എലമെൻ്റുകൾക്കായി ഇടത് അല്ലെങ്കിൽ വലത് പാഡിംഗ് മൂല്യം ഇരട്ടിപ്പിക്കുന്ന ഒരു ബഗ് ഈ ബ്രൗസറിലും ഉണ്ട്. മാതാപിതാക്കളുടെ വശത്തോട് ചേർന്നുള്ള മാർജിൻ ഇരട്ടിയായി. ഡിസ്പ്ലേ: ഫ്ലോട്ടഡ് എലമെൻ്റിലേക്ക് ഇൻലൈൻ ചേർത്താണ് പ്രശ്നം സാധാരണയായി പരിഹരിക്കുന്നത്.

7.0 വരെയുള്ള ഇൻറർനെറ്റ് എക്സ്പ്ലോറർ പതിപ്പുകൾ ഇൻഹറിറ്റ് മൂല്യത്തെ പിന്തുണയ്ക്കുന്നില്ല.

കുറിപ്പ്

യു ബ്ലോക്ക് ഘടകങ്ങൾപരസ്പരം ലംബമായി സ്ഥിതിചെയ്യുന്നു, ഇൻഡൻ്റുകൾ സംഗ്രഹിക്കാതെ പരസ്പരം സംയോജിപ്പിക്കുമ്പോൾ ഒരു തകർച്ച പ്രഭാവം നിരീക്ഷിക്കപ്പെടുന്നു. തകർച്ച തന്നെ രണ്ടോ അതിലധികമോ ബ്ലോക്കുകളിൽ (ഒന്ന് മറ്റൊന്നിനുള്ളിൽ കൂടുകൂട്ടാം) മുകളിലോ താഴെയോ ഇൻഡൻ്റുകളോടെ പ്രവർത്തിക്കുന്നു, അതേസമയം തൊട്ടടുത്തുള്ള ഇൻഡൻ്റുകൾ ഒന്നായി കൂട്ടിച്ചേർക്കപ്പെടുന്നു. ഇടത്, വലത് പാഡിംഗിന്, തകരുന്നത് ഒരിക്കലും പ്രയോഗിക്കില്ല.

ചുരുക്കൽ പ്രവർത്തിക്കുന്നില്ല:

• തകരുന്ന ഭാഗത്ത് പാഡിംഗ് പ്രോപ്പർട്ടി സജ്ജീകരിച്ചിരിക്കുന്ന ഘടകങ്ങൾക്ക്.
• തകരുന്ന ഭാഗത്ത് വ്യക്തമാക്കിയ അതിർത്തി ഉള്ള മൂലകങ്ങൾക്ക്;
• ഉള്ള ഘടകങ്ങളിൽ കേവല സ്ഥാനനിർണ്ണയം, അതായത്. അവരുടെ സ്ഥാനം കേവലമായി സജ്ജീകരിച്ചിരിക്കുന്നവർ;
• ഫ്ലോട്ടിംഗ് ഘടകങ്ങളിൽ (ഇതിനായി ഫ്ലോട്ട് പ്രോപ്പർട്ടി ഇടത്തോട്ടോ വലത്തോട്ടോ സജ്ജീകരിച്ചിരിക്കുന്നു);
• ഇൻലൈൻ ഘടകങ്ങൾക്ക്;
• വേണ്ടി .

ഉറവിടം: മാർജിൻ അല്ലെങ്കിൽ പാഡിംഗ്?
ഫിലിപ്പ് സ്പോറർ.
വിവർത്തനം: vl49.

ഫോർമാറ്റിംഗ് ആവശ്യങ്ങൾക്കായി എപ്പോഴാണ് മാർജിനുകൾ ഉപയോഗിക്കുന്നതും പാഡിംഗ് ഉപയോഗിക്കുന്നതും നല്ലത്, അത് എന്തെങ്കിലും വ്യത്യാസം വരുത്തുന്നുണ്ടോ?

അനുയോജ്യമായ ഉത്തരങ്ങൾക്കായി ഞാൻ വളരെക്കാലം കഷ്ടപ്പെട്ടു. കൂടാതെ, ഭയാനകമായ, അവ്യക്തമായ CSS കോഡ് എഴുതിയതിന് ശേഷം മാത്രം പാർശ്വഫലങ്ങൾ, മുകളിൽ ലിസ്റ്റുചെയ്‌തിരിക്കുന്ന പ്രശ്‌നങ്ങളെ സംബന്ധിച്ച അടിസ്ഥാനപരമായ ഇരുമ്പുമൂടിയ നിയമങ്ങൾ ഞാൻ കണ്ടെത്തിയെന്ന് ആത്മവിശ്വാസത്തോടെ പറയാൻ എനിക്ക് കഴിഞ്ഞു.

വ്യക്തതയ്ക്കായി, നമുക്ക് തിരിയാം സാധാരണ സാഹചര്യം, ഇത് മിക്കവാറും എല്ലാ ഡവലപ്പർമാർക്കും പരിചിതമാണ് ഉപയോക്തൃ ഇൻ്റർഫേസ് 2017-ൽ. ഞങ്ങൾക്ക് ഒരു ലളിതമായ കാർഡ് ടെംപ്ലേറ്റ് ഉണ്ട്.

IN ഈ ഉദാഹരണത്തിൽരണ്ട് തരം ഇടവേളകൾ ഉണ്ട്:

കാർഡുകൾക്കിടയിൽ (നീല);

കാർഡുകൾക്കും അവയുടെ കണ്ടെയ്നറിനും ഇടയിൽ (പച്ച);

സമ്മേളിക്കുമ്പോൾ പരസ്പരം ബന്ധപ്പെടുത്താൻ പാടില്ലാത്ത രണ്ട് വ്യത്യസ്ത ആശയങ്ങളാണ് നമ്മൾ കൈകാര്യം ചെയ്യുന്നതെന്ന് ഇവിടെ മനസ്സിലാക്കേണ്ടത് വളരെ പ്രധാനമാണ്. അതായത്, കാർഡുകളും അവയുടെ കണ്ടെയ്‌നറും തമ്മിലുള്ള ദൂരം എനിക്ക് മാറ്റണമെങ്കിൽ, ഉദാഹരണത്തിന്, 24 പിക്സലുകളിലേക്ക്, ഇത് ഒരു തരത്തിലും കാർഡുകൾ തമ്മിലുള്ള അകലത്തെ ബാധിക്കരുത്.

CSS ഉപയോഗിച്ച് ഉദാഹരണം നടപ്പിലാക്കുകയാണോ?

മാർജിനുകളും പാഡിംഗും ഉപയോഗിച്ച് ഇതുപോലൊരു ടെംപ്ലേറ്റ് സൃഷ്ടിക്കാൻ അക്ഷരാർത്ഥത്തിൽ ആയിരക്കണക്കിന് വഴികളുണ്ട്, എന്നാൽ മാർജിൻ, പാഡിംഗ് പ്രോപ്പർട്ടികൾ എന്നിവയുടെ ശരിയായ ഉപയോഗം തെളിയിക്കുന്ന ഒന്ന് അവതരിപ്പിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. മാത്രമല്ല, ഭാവിയിൽ മറ്റ് കാർഡുകൾ ചേർക്കാൻ ഈ രീതി നിങ്ങളെ അനുവദിക്കുന്നു.

കണ്ടെയ്നർ (
പാഡിംഗ്: 16px;
}
.കാർഡ് + .കാർഡ് (
മാർജിൻ: 0 0 0 8px;
}

വെറും 2 സെലക്ടർമാരും 2 നിയമങ്ങളും.

പ്ലസ് ചിഹ്നം എന്ത് പ്രവർത്തനം ചെയ്യുന്നു?

ചിഹ്നം + പ്രതിനിധീകരിക്കുന്നു അടുത്തുള്ള സെലക്ടർ. ഈ സെലക്‌ടറിന് മുമ്പായി വ്യക്തമാക്കിയ ഘടകത്തെ ഉടനടി പിന്തുടരുന്ന ഘടകത്തിലേക്ക് മാത്രമാണ് ഇത് വിരൽ ചൂണ്ടുന്നത്.

മുകളിലുള്ള ചിത്രത്തിൽ നിന്ന് കാണാൻ കഴിയുന്നതുപോലെ, ഞങ്ങളുടെ കാര്യത്തിൽ, ഈ സെലക്ടർ തിരഞ്ഞെടുക്കും മറ്റേതെങ്കിലും കാർഡിന് മുമ്പുള്ള എല്ലാ കാർഡും. അതിനാൽ, അടുത്തുള്ള സെലക്ടർ ഉപയോഗിച്ച്, ആദ്യത്തേത് ഒഴികെയുള്ള ഓരോ കാർഡിനും ഇടത് മാർജിൻ സജ്ജമാക്കാൻ കഴിയും.

ഇതിനർത്ഥം, ആവശ്യമുള്ള കാർഡുകളുടെ എണ്ണം ചേർക്കാനുള്ള കഴിവ് നമുക്കുണ്ട്, അതിനിടയിലുള്ള ദൂരം എപ്പോഴും എട്ട് പിക്സലുകൾ ആയിരിക്കും.

കാർഡുകൾക്ക് അടുത്തായി ഒരു കാർഡ് അല്ലാതെ മറ്റെന്തെങ്കിലും സ്ഥാപിക്കുന്നത് വരെ എല്ലാം നന്നായി പ്രവർത്തിക്കുന്നു. ശരി, നമുക്ക് ഒരു ബട്ടൺ പറയാം "കാർഡ് ചേർക്കുക" ("കാർഡ് ചേർക്കുക"):

നിലവിലുള്ള CSS കോഡ് സ്‌നിപ്പറ്റ് അനുസരിച്ച്, ബട്ടണിനെ പ്രതിനിധീകരിക്കുന്ന പുതിയ ഘടകത്തിലേക്ക് ഞങ്ങൾ ക്ലാസ് .കാർഡ് അസൈൻ ചെയ്യില്ല, കാരണം ഇതൊരു കാർഡ് അല്ല. ഇതെങ്ങനെയാകും? ഇതിനായി ഒരു അധിക ക്ലാസ് നാമം .ആഡ്-കാർഡ് സൃഷ്‌ടിക്കുന്നത് മൂല്യവത്താണോ, അതിൽ .കാർഡ് ക്ലാസിൻ്റെ മാർജിൻ പ്രോപ്പർട്ടിയ്‌ക്കൊപ്പം അതേ നിയമം അടങ്ങിയിരിക്കുന്നുണ്ടോ? ഇല്ല, ഇതിലും നല്ലൊരു പരിഹാരമുണ്ട്.

ലോബോടോമൈസ്ഡ് മൂങ്ങ *+* .

അത് എങ്ങനെയിരിക്കും? തമാശയുള്ള അസോസിയേഷൻ ഉണ്ടായിരുന്നിട്ടും, ഈ രീതി മികച്ച രീതിയിൽ പ്രവർത്തിക്കുന്നു, അതിൻ്റെ അസ്തിത്വത്തെക്കുറിച്ച് പഠിച്ചതുമുതൽ ഞാൻ ഇത് നിരന്തരം ഉപയോഗിക്കുന്നു. അപ്പോൾ ഇതെല്ലാം എന്തിനെക്കുറിച്ചാണ്? അനുബന്ധ CSS കോഡ് നോക്കുക:

കണ്ടെയ്നർ (
പാഡിംഗ്: 16px;
}
/* ശരി, ലോബോടോമൈസ് ചെയ്ത മൂങ്ങയെ നിങ്ങൾ തിരിച്ചറിഞ്ഞോ? 😜 */
.കണ്ടെയ്നർ > * + * (
മാർജിൻ: 0 0 0 8px;
}

നിങ്ങൾ ഓർക്കുന്നതുപോലെ, മുമ്പത്തെ സെലക്ടർ മറ്റൊരു കാർഡിന് മുമ്പുള്ള ഏത് കാർഡിലേക്കും പ്രയോഗിച്ചു. ഇപ്പോൾ അതിൻ്റെ സഹായത്തോടെ നമുക്ക് ഫോർമാറ്റ് ചെയ്യാം എല്ലാ ഘടകങ്ങളും തൊട്ടുമുമ്പുള്ള മറ്റേതെങ്കിലും മൂലകമാണ്, ബട്ടൺ ഉൾപ്പെടെ, തീർച്ചയായും.

ഒടുവിൽ.

ഒരു കണ്ടെയ്‌നറിനുള്ളിലെ ഉള്ളടക്കം വേർതിരിക്കുന്നതിന് പാഡിംഗ് എപ്പോൾ ഉപയോഗിക്കണമെന്നും മാർജിനുകൾ എപ്പോൾ ഉപയോഗിക്കണമെന്നും മനസ്സിലാക്കാൻ ഇവിടെ അവതരിപ്പിച്ച മെറ്റീരിയൽ നിങ്ങളെ സഹായിച്ചിട്ടുണ്ടെന്ന് ഞാൻ ആത്മാർത്ഥമായി പ്രതീക്ഷിക്കുന്നു.

തൽഫലമായി, മേൽപ്പറഞ്ഞ ഉദാഹരണങ്ങളും പരീക്ഷിച്ചവയും പ്രദർശിപ്പിക്കുന്ന ഒരു പേന-പ്രോജക്‌റ്റ് നിങ്ങളുടെ പരിഗണനയ്‌ക്കായി അവതരിപ്പിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. സ്വന്തം അനുഭവംരണ്ട് നിയമങ്ങൾ. അതിനാൽ, നമുക്ക് ഉപയോഗിക്കാം:

പാഡിംഗ്- കണ്ടെയ്നറിനും അതിൻ്റെ ഉള്ളടക്കത്തിനും ഇടയിലുള്ള ഇടങ്ങൾക്കായി.

മാർജിൻ- കണ്ടെയ്നറിനുള്ളിലെ മൂലകങ്ങൾക്കിടയിലുള്ള ഇടങ്ങൾക്കായി.