CSS వెడల్పు ఆస్తి మూలకం యొక్క కంటెంట్ ప్రాంతం యొక్క వెడల్పును నిర్వచిస్తుంది. ఈ ప్రాంతం మూలకం యొక్క సరిహద్దు, పాడింగ్ మరియు మార్జిన్ మధ్య ఖాళీ. అంతేకాకుండా, CSS వెడల్పు ఆస్తి విలువ ' సరిపోయే-కంటెంట్ ” కంటెంట్ ప్రకారం మూలకం యొక్క వెడల్పును సర్దుబాటు చేస్తుంది.
ఈ అధ్యయనం CSS వెడల్పు ప్రాపర్టీని విలువ ఫిట్-కంటెంట్‌తో వివరిస్తుంది.
ఫిట్-కంటెంట్ విలువతో CSS వెడల్పు ప్రాపర్టీని ఎలా ఉపయోగించాలి?
ఫిట్-కంటెంట్ విలువతో CSS వెడల్పు ప్రాపర్టీని ఉపయోగించడం కోసం, ఇచ్చిన సింటాక్స్‌ని చూడండి:
వెడల్పు: సరిపోయే-కంటెంట్
ఉదాహరణ
HTMLలో, ఒకే తరగతి పేరుతో మూడు డివి ఎలిమెంట్లను జోడించండి “ పెట్టె 'మరియు మూడు వేర్వేరు తరగతులు' రంగు-1 ',' రంగు-2 ', మరియు' రంగు-3 ”, వరుసగా. వెబ్ పేజీకి కంటెంట్‌ని జోడించడానికి ప్రతి డివిలో
మూలకాన్ని జోడించండి:
< div తరగతి = 'బాక్స్ కలర్-1' >
< p > CSS వెడల్పు సరిపోయే కంటెంట్ p >
div >
< div తరగతి = 'బాక్స్ కలర్-2' >
< p > హలో వరల్డ్ ! p >
div >
< div తరగతి = 'బాక్స్ కలర్-3' >
< p > నమ్మకాన్ని పెంపొందించడం ద్వారా జట్టుకృషి ప్రారంభమవుతుంది. మేం పనిచేసే బృందం కోసం ఒక సాధారణ మిషన్. p >
div >
HTML కోడ్ యొక్క అవుట్‌పుట్ ఇక్కడ ఉంది:
ఇప్పటివరకు, మేము HTML పేజీని చర్చించాము. ఇప్పుడు, తదుపరి విభాగంలో, మేము HTML మూలకాలను మెరుగ్గా కనిపించేలా చేయడానికి వాటికి విభిన్న CSS శైలులను వర్తింపజేస్తాము. కొనసాగుతున్న ఉదాహరణలో, మేము '' యొక్క ప్రవర్తనను పరిశీలిస్తాము వెడల్పు 'విలువ కలిగిన ఆస్తి' సరిపోయే-కంటెంట్ ” CSS లో.
స్టైల్ “బాక్స్” డివి
.పెట్టె {వెడల్పు: సరిపోయే-కంటెంట్;
ఎత్తు: 50px;
రంగు: గోస్ట్ వైట్;
పాడింగ్: 6px;
మార్జిన్: 2px;
ఫాంట్ పరిమాణం: 18px;
}
ది ' .పెట్టె ” అనేది div క్లాస్ బాక్స్‌ని సూచిస్తుంది. దీనికి వర్తించే లక్షణాలు క్రింద ఉన్నాయి:
-
- ' వెడల్పు 'విలువతో ఆస్తి' సరిపోయే-కంటెంట్ ” అందుబాటులో ఉన్న స్థలాన్ని ఉపయోగిస్తుంది, కానీ అది కంటెంట్‌ను మించదు.
- ' ఎత్తు ” అనేది మూలకం యొక్క ఎత్తును నిర్ణయించే ఆస్తి.
- ' రంగు ” మూలకం యొక్క ఫాంట్ రంగును నిర్వచిస్తుంది.
- ' పాడింగ్ ” ఆస్తి మూలకం యొక్క సరిహద్దు లోపల లేదా కంటెంట్ చుట్టూ ఖాళీని ఉత్పత్తి చేస్తుంది.
- ' మార్జిన్ ” మూలకం చుట్టూ ఖాళీని నిర్ణయిస్తుంది.
- ' ఫాంట్ పరిమాణం ” లక్షణం ఫాంట్ పరిమాణాన్ని నిర్ణయిస్తుంది.
శైలి 'రంగు-1' div
.రంగు- 1 {నేపథ్య రంగు: #00ABB3;
}
ది ' నేపథ్య రంగు 'ఆస్తి' కు సెట్ చేయబడింది .రంగు-1 ” div.
శైలి 'రంగు-2' div
.రంగు- 2 {నేపథ్య రంగు: #083AA9;
}
శైలి 'రంగు-3' div
నేపథ్య రంగు: #4C6793;
}
మూలకం యొక్క వెడల్పు కంటెంట్‌కు సమానంగా సెట్ చేయబడిందని గమనించవచ్చు:
అది గొప్పది! మేము CSS వినియోగాన్ని విజయవంతంగా నేర్చుకున్నాము ' వెడల్పు 'విలువతో ఆస్తి' సరిపోయే-కంటెంట్ ”.
ముగింపు
CSS వెడల్పు ప్రాపర్టీ మాకు అనేక విలువలను ఉపయోగించుకోవడానికి అనుమతిస్తుంది. ఈ విలువలు శాతం, పిక్సెల్‌లు లేదా అంతకంటే ఎక్కువ. కంటెంట్ ప్రకారం దీన్ని సెట్ చేయడానికి, ' సరిపోయే-కంటెంట్ ”విలువ సెట్ చేయవచ్చు. ఈ పోస్ట్ CSS వెడల్పు ప్రాపర్టీని విలువ ఫిట్-కంటెంట్‌తో ఆచరణాత్మక ప్రదర్శనతో వివరించింది.