ది ' మార్జిన్-టాప్ 'ప్రతిస్పందించే లేఅవుట్‌లను రూపొందించడంలో మరియు HTML మూలకాలను ఉంచడంలో చాలా మంది డెవలపర్‌లకు ప్రాపర్టీ సహాయపడుతుంది. 'మార్జిన్-టాప్' ప్రాపర్టీ యొక్క వినియోగం HTML మూలకాలపై మరింత నియంత్రణను అందిస్తుంది, దృశ్య విభజనను జోడిస్తుంది మరియు మెరుగైన ప్రతిస్పందించే డిజైన్‌లను రూపొందించడంలో సహాయపడుతుంది. ఈ గైడ్ CSSలో ఆచరణాత్మక అమలుతో మార్జిన్-టాప్ ప్రాపర్టీని ప్రదర్శిస్తుంది.
- 'మార్జిన్-టాప్' ప్రాపర్టీ అంటే ఏమిటి?
- సానుకూల విలువతో 'మార్జిన్-టాప్' ప్రాపర్టీని ఉపయోగించండి
- ప్రతికూల విలువతో 'మార్జిన్-టాప్' ప్రాపర్టీని ఉపయోగించండి
'మార్జిన్-టాప్' ప్రాపర్టీ అంటే ఏమిటి?
ది ' మార్జిన్-టాప్ HTML మూలకాల మధ్య అదనపు ఖాళీని సృష్టించడానికి ఆస్తి ఉపయోగించబడుతుంది. ఇది సానుకూల మరియు ప్రతికూల విలువలతో సెట్ చేయవచ్చు. ఈ విలువలు డిజైన్ అవసరాలకు అనుగుణంగా సెట్ చేయబడతాయి మరియు అతివ్యాప్తి చెందకుండా నిరోధించడంలో మరియు HTML మూలకాల మధ్య అంతరాన్ని సర్దుబాటు చేయడంలో సహాయపడతాయి.
సానుకూల విలువతో 'మార్జిన్-టాప్' ప్రాపర్టీని ఎలా ఉపయోగించాలి?
సానుకూల విలువ కలిగిన “మార్జిన్-టాప్” ప్రాపర్టీ ఎగువ స్థానం నుండి ఎంచుకున్న HTML మూలకం మధ్యలో అదనపు అంతరాన్ని జోడిస్తుంది. అందించిన విలువ పిక్సెల్‌లు, శాతం, రెమ్ లేదా ఆటో, ఇన్‌హెరిట్, అన్‌సెట్ మొదలైన గ్లోబల్ విలువలలో ఉండవచ్చు. బాగా అర్థం చేసుకోవడానికి ఒక ఉదాహరణను చూద్దాం:
ఉదాహరణ: సానుకూల విలువ యొక్క వినియోగం
''ని సృష్టించే HTML ఫైల్‌ని ఊహిద్దాం. HTML నిర్మాణాన్ని సృష్టించిన తర్వాత, CSS లక్షణాలను వర్తింపజేయండి అనుకూల 'తరగతి: పై కోడ్ స్నిప్పెట్‌లో: ఎగువ కోడ్ స్నిప్పెట్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది: పై gif వెబ్‌పేజీలో మార్జిన్-టాప్ ప్రాపర్టీ విలువను సెట్ చేయడం వల్ల కలిగే ప్రభావాన్ని వివరిస్తుంది. ది ' మార్జిన్-టాప్ ”నెగటివ్ విలువ కలిగిన ఆస్తి ఎగువ స్థానం నుండి మధ్యలోకి ఎదురుగా లేదా ఎంచుకున్న HTML మూలకానికి సంబంధించి పేజీ వెలుపలి వైపు అదనపు అంతరాన్ని సెట్ చేస్తుంది. ఇది ఎక్కువగా అతివ్యాప్తి ప్రభావాలను సృష్టించడానికి లేదా HTML మూలకం యొక్క స్థానాల్లో ఉపయోగించబడుతుంది. మంచి అవగాహన కోసం ఒక ఉదాహరణ ద్వారా నడుద్దాం. ఉదాహరణ: ప్రతికూల విలువ వినియోగం ''ని సృష్టించే HTML ఫైల్‌ని ఊహిద్దాం. పైన పేర్కొన్న కోడ్ స్నిప్పెట్ యొక్క వివరణ క్రింద వివరించబడింది: ఎగువ కోడ్ స్నిప్పెట్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది: ఎగువన ఉన్న gif మార్జిన్-టాప్ ప్రాపర్టీకి ప్రతికూల విలువను సెట్ చేయడం ద్వారా వెబ్ పేజీ రూపకల్పనపై సంభవించే ప్రభావాన్ని ప్రదర్శిస్తుంది. ది ' మార్జిన్-టాప్ HTML మూలకాల మధ్య అదనపు ఖాళీని సృష్టించడానికి ఆస్తి ఉపయోగించబడుతుంది. ఇది సానుకూల మరియు ప్రతికూల విలువలతో సెట్ చేయవచ్చు. 'మార్జిన్-టాప్' ప్రాపర్టీ సానుకూల విలువతో కేటాయించబడితే, అదనపు స్థలం వెబ్‌పేజీ మధ్యలో లేదా ఎంచుకున్న HTML మూలకం వైపు జోడించబడుతుంది. “ప్రతికూల” విలువ విషయంలో స్థలం జోడించబడుతుంది కానీ పేజీ వెలుపలి వైపు ఉంటుంది. ఈ కథనం CSSలో మార్జిన్-టాప్ ప్రాపర్టీ అంటే ఏమిటో చూపుతుంది.
< శరీరం >
< div తరగతి = 'అనుకూల' >
< p > సానుకూల విలువతో మార్జిన్ టాప్ కేటాయించబడింది p >
div >
శరీరం >
< శైలి >
.అనుకూల {
వెడల్పు: 300px;
ఎత్తు: 200px;
నేపథ్య రంగు: అటవీ ఆకుపచ్చ;
ఫాంట్ పరిమాణం: 20px;
రంగు: #fff;
మార్జిన్-టాప్: 50px;
}
శైలి >
ప్రతికూల విలువతో 'మార్జిన్-టాప్' ప్రాపర్టీని ఎలా ఉపయోగించాలి?
.ప్రతికూల {
రంగు: తెలుపు;
టెక్స్ట్-అలైన్: సెంటర్;
నేపథ్య రంగు: ఎరుపు ;
మార్జిన్ టాప్: -30px ;
పాడింగ్: 30px;
ఎత్తు: 100px;
}
శైలి >
< శరీరం >
< div తరగతి = 'ప్రతికూల' >
ప్రతికూల విలువ కేటాయించబడింది కోసం మార్జిన్-టాప్ ప్రాపర్టీ
div >
శరీరం >
ముగింపు