ఈ మాన్యువల్ రెండు లింక్‌ల మధ్య ఖాళీని సృష్టించే విధానాన్ని మీకు నేర్పుతుంది.
ప్రారంభిద్దాం!
HTML & CSSలో రెండు లింక్‌ల మధ్య స్పేస్ ఇవ్వడం ఎలా?
రెండు లింక్‌ల మధ్య ఖాళీని ఇవ్వడానికి, ముందుగా HTML ఫైల్‌లో అవసరమైన లింక్‌లను జోడించండి.
దశ 1: HTMLలో లింక్‌లను జోడించండి
HTMLలో, మేము
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > HTML ఫైల్‌ను ఎలా సృష్టించాలి? < / a >
< a href = “https://linuxhint.com/edit-html-file/” > HTML ఫైల్‌ను ఎలా సవరించాలి? < / a >
< / div >
లింక్‌లు విజయవంతంగా జోడించబడినట్లు క్రింది చిత్రం చూపిస్తుంది:
దశ 2: Div & లింక్‌ని స్టైల్ చేయండి
ఈ దశలో, 'ని ఉపయోగించి div మరియు లింక్‌ని స్టైల్ చేయండి div ” CSS లో. మేము పాడింగ్‌ని ''కి సర్దుబాటు చేస్తాము 40px ” మరియు లింక్‌ల ఫాంట్ పరిమాణాన్ని “గా సెట్ చేయండి పెద్దది ', div యొక్క ఎత్తు ఇలా సెట్ చేయబడింది' 150px ” మరియు బ్యాక్‌గ్రౌండ్ ప్రాపర్టీని ఉపయోగించండి మరియు div రంగును ఇలా సెట్ చేయండి నలుపు ”. ఆ తర్వాత, అంచు వెడల్పును ఇలా సర్దుబాటు చేయండి 5px ”, శైలి “ గీతలు పడ్డాయి 'మరియు రంగు' rgb(251, 255, 0) ”.
CSS
div {పాడింగ్ : 40px ;
ఫాంట్ పరిమాణం : పెద్దది ;
ఎత్తు : 150px ;
నేపథ్య : నలుపు ;
సరిహద్దు : 5px గీతలు పడ్డాయి rgb ( 251 , 255 , 0 ) ;
}
పై కోడ్‌ని ఉపయోగించి, కింది అవుట్‌పుట్ పొందబడుతుంది. మీరు చూడగలిగినట్లుగా, div మరియు లింక్‌లు రెండూ స్టైల్ చేయబడ్డాయి:
దశ 3: రెండు లింక్‌ల మధ్య క్షితిజ సమాంతరంగా ఖాళీని ఇవ్వండి
HTML మరియు CSSలను ఉపయోగించడం ద్వారా మేము రెండు లింక్‌ల మధ్య క్షితిజ సమాంతరంగా ఖాళీని ఇవ్వవచ్చు. ఇక్కడ, మేము రెండు పద్ధతులను ఒక్కొక్కటిగా వివరిస్తాము.
విధానం 1: HTMLని ఉపయోగించడం
ఎలాంటి బాహ్య CSSని వ్రాయకుండా లింక్‌ల మధ్య ఖాళీని ఇవ్వడానికి, మీరు ' ”మీరు ఖాళీని సృష్టించాలనుకుంటున్న HTMLలో. ' ” అంటే నాన్-బ్రేకింగ్ స్పేస్. HTML ఫైల్‌లో, ఒక ని జోడించడం అంటే ఒక ఖాళీ. మీరు ఎక్కువ స్థలాన్ని ఇవ్వాలనుకుంటే, అవసరమైన ఖాళీల సంఖ్యకు అనుగుణంగా ని మాన్యువల్‌గా జోడించడం ఉత్తమం కాదు.
పేర్కొన్న భావనను అర్థం చేసుకోవడానికి ఉదాహరణకి వెళ్దాం!
ఉదాహరణ
ఇక్కడ, మేము నాలుగు సార్లు వ్రాస్తాము ' ” నాలుగు ఖాళీల తర్వాత రెండవ లింక్ కనిపించే విధంగా మొదటి లింక్ తర్వాత ఖాళీని సృష్టించడానికి.
HTML
< div >< a href = “https://linuxhint.com/create-html-file/” > HTML ఫైల్‌ను ఎలా సృష్టించాలి? < / a >
HTML ఫైల్‌ను ఎలా సవరించాలి?
మీరు చూడగలిగినట్లుగా, మొదటి లింక్ యొక్క కుడి వైపున స్పేస్ సృష్టించబడింది:
విధానం 2: CSSని ఉపయోగించడం
CSSలో, మేము 'ని ఉపయోగిస్తాము మార్జిన్-కుడి ”రెండు లింక్‌ల మధ్య ఖాళీని ఇవ్వడానికి ఆస్తి. ది ' మార్జిన్-కుడి మూలకం యొక్క కుడి వైపు నుండి స్థలాన్ని జోడించడానికి ఆస్తి ఉపయోగించబడుతుంది. మీరు దాని కోసం ప్రతికూల విలువలను కూడా సెట్ చేయవచ్చు.
వాక్యనిర్మాణం
మార్జిన్-రైట్ ప్రాపర్టీ యొక్క సింటాక్స్ క్రింద ఇవ్వబడింది:
మార్జిన్-కుడి : విలువస్థానంలో ' విలువ ”, మూలకం యొక్క కుడి వైపు నుండి మార్జిన్‌ను సెట్ చేయండి. ఉదాహరణను కొనసాగిద్దాం.
ఉదాహరణ
ఇక్కడ, మేము ఉపయోగిస్తాము ' a ” మేము HTMLలో సృష్టించిన లింక్‌ని యాక్సెస్ చేయడానికి. తర్వాత, మార్జిన్-రైట్ ప్రాపర్టీ విలువను ఇలా సెట్ చేయండి 50px ”:
a {మార్జిన్-కుడి : 50px ;
}
మొదటి లింక్ యొక్క కుడి వైపు నుండి స్పేస్ సృష్టించబడింది, దానిని క్రింద చూడవచ్చు:
దశ 4: నిలువుగా రెండు లింక్‌ల మధ్య ఖాళీని ఇవ్వండి
రెండు లింక్‌ల మధ్య నిలువు ఖాళీని ఇవ్వడానికి, మొదట లింక్‌లను నిలువు రూపంలో సమలేఖనం చేయండి. ఇది 'ని ఉపయోగించడం ద్వారా చేయబడుతుంది నిరోధించు 'విలువ' ప్రదర్శన 'ఆస్తి మరియు ఆపై ఉపయోగించడం' లైన్-ఎత్తు ”రెండు లింక్ లైన్ల మధ్య ఖాళీని ఇవ్వడానికి ఆస్తి.
ఉదాహరణ:
ఇక్కడ, మేము డిస్ప్లే ప్రాపర్టీ విలువను ఇలా సెట్ చేస్తాము ' నిరోధించు ” లింక్‌లను నిలువుగా సమలేఖనం చేయడానికి. ఆపై, లైన్-ఎత్తు ఆస్తి విలువను ''గా సెట్ చేయడం ద్వారా రెండు లింక్‌ల మధ్య ఖాళీని ఇవ్వండి 80px ”:
a {ప్రదర్శన : నిరోధించు ;
లైన్-ఎత్తు : 80px ;
}
మీరు చూడగలిగినట్లుగా, లైన్-ఎత్తు ప్రాపర్టీని ఉపయోగించి స్పేస్ సృష్టించబడుతుంది:
అంతే! HTML & CSSలో రెండు లింక్‌ల మధ్య ఖాళీని ఇచ్చే పద్ధతిని మేము వివరించాము.
ముగింపు
ది ' ',' మార్జిన్-కుడి ', మరియు' లైన్-ఎత్తు ” CSS యొక్క లక్షణాలు రెండు లింక్‌ల మధ్య క్షితిజ సమాంతర మరియు నిలువు స్థలాన్ని ఇవ్వడానికి ఉపయోగించబడతాయి. దీన్ని ఉపయోగించి, మీరు లింక్‌ల కుడి మరియు ఎడమ వైపుల నుండి ఖాళీని సర్దుబాటు చేయవచ్చు. ఈ వ్యాసంలో, మేము రెండు వేర్వేరు పద్ధతులను ఉపయోగించి రెండు లింక్‌ల మధ్య ఖాళీని ఇచ్చే విధానాన్ని వివరించాము మరియు సంబంధిత ఉదాహరణలను అందించాము.