CSS ലെ സജ്ജീകരണങ്ങൾ: വരികൾക്കിടയിലുള്ള ദൂരം

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

നിങ്ങൾ ഒന്നും ചെയ്യുന്നില്ലെങ്കിൽ, സ്വതവേയുള്ള മൂല്ല്യങ്ങൾ സജ്ജീകരിയ്ക്കുന്നു. നിങ്ങൾക്ക് വേണമെങ്കിൽ, ഈ ദൂരം മാറ്റാൻ കഴിയും. മൂല്യം, ശതമാനത്തിൽ അല്ലെങ്കിൽ പിക്സലിൽ ആയിരിക്കും.

വരി ഉയരം

CSS ൽ, വരികൾക്കിടയിലുള്ള ദൂരം താഴെപറയുന്ന വ്യക്തിയനുസരിച്ച് പ്രദർശിപ്പിക്കാൻ കഴിയും.

മുകളിലുള്ള ചിത്രം അനുബന്ധ ദൂരങ്ങളുള്ള parameters കാണിക്കുന്നു. ടെക്സ്റ്റ് ഫോണ്ട് സൈസ് സ്പേസിൽ സ്ഥിതിചെയ്യുന്നു. ടെക്സ്റ്റിന്റെ വരി ചുവടെ ആരംഭിക്കുന്നില്ലെന്നത് ശ്രദ്ധിക്കുക, എന്നാൽ അൽപ്പം കൂടിയതാണ്. ചുവടെയുള്ള ഘടകങ്ങൾ (g, y, തുടങ്ങിയവ) ഉള്ള അക്ഷരങ്ങൾക്കായി താഴെയുള്ള സ്പെയ്സ് നൽകുക.

ഫോണ്ട്-സൈസ് ബ്ളോക്കുകൾ തമ്മിലുള്ള സ്പേസിംഗ് ലീഡ് ആണ് എന്ന് ശ്രദ്ധിക്കുക. HTML- ഉം CSS- ലും ഈ സവിശേഷത ഏതെങ്കിലും വിധത്തിൽ ദൃശ്യമാകില്ല, പക്ഷേ അത് മറ്റ് ഗ്രാഫിക്കിലും ടെക്സ്റ്റ് എഡിറ്റർമാരുടേയുംതാണ്. ഉദാഹരണത്തിന്, അഡോബ് ഫോട്ടോഷോപ്പിൽ.

മുകളിലുള്ള ചിത്രം ഫോട്ടോഷോപ്പിൽ നിങ്ങൾ മുന്നിട്ട് സൂചിപ്പിക്കാനാവും. ഒരു നമ്പർ ഫോണ്ട്-സൈസ് പരാമീറ്റർ സൂചിപ്പിക്കുന്നു.

ലൈൻ-ഉയരം ഉപയോഗിക്കുന്നതിനുള്ള ഉദാഹരണങ്ങൾ

CSS- ൽ, വരികൾക്കിടയിലുള്ള ദൂരം ശതമാനത്തിൽ ക്രമപ്പെടുത്താവുന്നതാണ്. ഒരു ദൃഷ്ടാന്തം താഴെ കൊടുത്തിരിക്കുന്നു.

ഒരു ചെറിയ മൂല്യത്തിന്റെ കാര്യത്തിൽ, നിങ്ങളുടെ സൈറ്റിന്റെ ഉപയോക്താവിനെ വായിക്കാൻ അസ്വസ്ഥതയുണ്ടാകും.

ദൂരം മാറ്റാനും ഫോണ്ട് വലുപ്പം മാറ്റാനും കഴിയും. പ്രധാന ഘടകങ്ങൾ തമ്മിലുള്ള വ്യത്യാസം കണക്കുകൾ വളരെ വ്യത്യസ്തമാണ് എങ്കിൽ, ഈ വ്യത്യാസം മുൻകൂട്ടി വർദ്ധനവ് കൊണ്ട് നഷ്ടപ്പെടും.

ഡിസൈനിലെ ഉപസംഹാരം

CSS ൽ, വരികൾക്കിടയിലുള്ള ദൂരം വിവിധ ഇൻഡന്റുകൾക്കൊപ്പം കൂടുതൽ അഡ്ജസ്റ്റ് ചെയ്തേക്കാം. നമുക്ക് അക്കത്തിൽ ഒരു ഉദാഹരണം നോക്കാം.

"Element" ഫീൽഡിൽ, ഞങ്ങളുടെ കാര്യത്തിൽ വാചകം ഉണ്ടാകും. പാഡിംഗ് ഒരു ഒബ്ജക്റ്റിനുള്ളിൽ ഒരു ഇൻഡന്റേഷൻ ആണ്, കൂടാതെ മാർജിൻ ഒരു വസ്തുവിന്റെ ഒരു നീണ്ടറഞ്ഞതാണ്. ബോർഡർ ഒരു ഫ്രെയിം ആണ്. അത് 0 പിക്സലുകളായിരിക്കാം, ചിലപ്പോൾ 100 ആയിരിക്കാം.

താഴെക്കൊടുത്തിരിക്കുന്ന ചിത്രത്തിൽ ടെക്സ്റ്റ് വരിയിലെ എല്ലാ ഇൻഡന്റുകൾ, ഫ്രെയിം, ഉയരം എന്നിവയും കാണിക്കുന്നു.

നിങ്ങൾക്ക് ഒരു ചെറിയ ടെക്സ്റ്റ്, ഒറ്റ വരിയിൽ അല്ലെങ്കിൽ ഓരോ വരിയും ഒരു പ്രത്യേക ഖണ്ഡികയിൽ ഉണ്ടെങ്കിൽ, ഈ ഖണ്ഡികകൾക്കിടയിൽ ഇൻഡെക്സ് ചെയ്തുകൊണ്ട് ദൂരം ക്രമപ്പെടുത്താവുന്നതാണ്. അതായത്, ഒരു മൂലകത്തിലെ ലൈനുകൾക്കിടയിൽ സാങ്കല്പികവും പാഡിങ്ങും ഒന്നുമില്ല. അവ വസ്തുവിന്റെ അറ്റങ്ങൾ മാത്രം ഉൾകൊള്ളുന്നു. ഒരു വസ്തു മുഴുവൻ ഒരു ഖണ്ഡികയാണ്, അതിൽ ഒരു വരിയല്ല. ഇവിടെ ആശയക്കുഴപ്പത്തിലാകാതിരിക്കേണ്ടത് പ്രധാനമാണ്.

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

എങ്ങനെയാണ് CSS ലൈനുകൾ തമ്മിലുള്ള ദൂരം വർദ്ധിപ്പിക്കേണ്ടത്

HTML ന്റെ വരികൾ തമ്മിലുള്ള ദൂരം ഒരു ക്ലാസ് അല്ലെങ്കിൽ ടെക്സ്റ്റിലെ എല്ലാ ഖണ്ഡികകളും നിയുക്തമാക്കാൻ കഴിയും. നിങ്ങൾ ഇത് വ്യക്തമാക്കുകയാണെങ്കിൽ: p {line-height: 20px; }, തുടർന്ന് പൂർണമായും പേജിൽ ഉള്ള എല്ലാ ഖണ്ഡികകളിലും 20 പിക്സൽ വരികൾ ഉണ്ടായിരിക്കും. നിങ്ങൾക്ക് വിവിധ സ്ഥലങ്ങളിൽ വ്യത്യസ്ത വലിപ്പങ്ങൾ വേണമെങ്കിൽ, താഴെ പറയുന്ന രീതിയിൽ ചെയ്യണം.

ശൈലികൾ നിർദ്ദേശിക്കുന്നു.

. Class1 {line-height: 20px; }

. Class2 {line-height: 16px; }

.class3 {line-height: 12px; }

വ്യക്തതയ്ക്കായി, ഞങ്ങൾ ഒരു ഫ്രെയിം ചേർക്കുന്നതിനാൽ ഇത് പ്രവർത്തിക്കുന്നതായി നിങ്ങൾക്ക് കാണാൻ കഴിയും. ഭാവിയിൽ, അത് നീക്കം ചെയ്യണം.

ഈ ക്ലാസുകൾ പ്രയോഗിക്കുക. ഫലം താഴെ.

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

വളരെ ചെറിയ ടെക്സ്റ്റും ലൈനുകൾക്കിടയിലുള്ള ഒരു ചെറിയ ദൂരം ചെയ്യാൻ ശുപാർശ ചെയ്യുന്നില്ല. ഈ ഉപയോക്താവിന് നിശബ്ദമായി വായിക്കാനാവുന്നില്ല. അവൻറെ കണ്ണുകൾ പെട്ടെന്ന് ക്ഷീണിക്കും. ടെക്സ്റ്റ് ഉപയോക്തൃ സൗഹൃദമാണെന്ന് തിരയൽ എഞ്ചിനും പറയുന്നു.

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

ഈ വിശകലനത്തിനായി സഹായിക്കുന്ന ഒരു പ്രത്യേക ഉപകരണം സെർച്ച് എഞ്ചിൻ "Google" ഉണ്ട്. വെബ്മാസ്റ്റർമാർക്ക് ഇത് വളരെ സൗകര്യപ്രദമാണ്.

ഇതാണ് ഫലങ്ങളുടെ ഒരു ഉദാഹരണം.

ഈ മാനദണ്ഡം തിരയൽ ഫലത്തെ സ്വാധീനിക്കുന്നതിനാൽ അവരുടെ സൂചനകൾ ഉപയോഗിക്കാൻ ശുപാർശചെയ്യുന്നു.