CSS పాడింగ్ CSS బాక్స్ మోడల్ యొక్క లక్షణాలలో ఒకటి. ఈ షార్ట్హ్యాండ్ ఆస్తి HTML మూలకం యొక్క నాలుగు వైపులా చుట్టూ పాడింగ్ను అమర్చింది. CSS పాడింగ్ దాదాపు ప్రతి HTML టాగ్ (పట్టిక ట్యాగ్లు కొన్ని మినహా) అన్వయించవచ్చు. అదనంగా, మూలకం యొక్క అన్ని నాలుగు వైపులా వేరే విలువ ఉంటుంది.
CSS పాడింగ్ ఆస్తి
షార్ట్హ్యాండ్ CSS padding ఆస్తిని ఉపయోగించడానికి, మీరు జ్ఞాపకార్థం "TROUBLe" (లేదా స్టార్ ట్రెక్ అభిమానుల కోసం "TRiBbLe") ను ఉపయోగించవచ్చు. ఇది అగ్రస్థానం , కుడి , దిగువ మరియు ఎడమ వైపు ఉంటుంది మరియు ఇది మీరు షార్ట్ హ్యాండ్ ఆస్తిలో సెట్ చేసిన పాడింగ్ వెడల్పుల క్రమాన్ని సూచిస్తుంది. ఉదాహరణకి:
padding: పైన కుడి దిగువ ఎడమ; పాడింగ్: 1px 2px 3px 6px;మీరు పైన జాబితా చేసిన విలువలను ఉపయోగించినట్లయితే, ఇది మీరు వర్తించే HTML మూలకం యొక్క ప్రతి వైపున వేరొక పాడింగ్ విలువను వర్తింపజేస్తుంది. మీరు నాలుగు వైపులా ఒకే పాడింగ్ను దరఖాస్తు చేయాలనుకుంటే, మీరు మీ CSS ను సరళీకృతం చేసుకోవచ్చు మరియు కేవలం ఒక విలువను రాయవచ్చు:
పాడింగ్: 12px;CSS యొక్క ఆ లైన్ తో, పాడింగ్ యొక్క 12 పిక్సెళ్ళు మూలకం యొక్క అన్ని వైపులా వర్తిస్తాయి.
పైభాగానికి మరియు దిగువకు మరియు ఎడమకు మరియు కుడికి మీరు పాడింగ్ చేయాలనుకుంటే, మీరు రెండు విలువలను రాయవచ్చు:
పాడింగ్: 24px 48px;మొదటి విలువ (24px) ఎగువ మరియు దిగువకు వర్తిస్తుంది, రెండవది ఎడమ మరియు కుడికి వర్తించబడుతుంది.
మీరు మూడు విలువలను వ్రాస్తే, ఎగువ మరియు దిగువ మార్చేటప్పుడు అదే సమాంతర పాడింగ్ (ఎడమ మరియు కుడి) ను చేస్తుంది:
పాడింగ్: టాప్ కుడి మరియు ఎడమ దిగువ; పాడింగ్: 0px 1px 3px;CSS బాక్స్ మోడల్ ప్రకారం, padding మూలకం / కంటెంట్ దానికి దగ్గరగా ఉంటుంది. దీని అర్థం పాడింగ్ అనేది కంటెంట్ వెడల్పు లేదా ఎత్తు మరియు మీరు ఉపయోగించే ఏ సరిహద్దు విలువల మధ్య ఒక అంశానికి జోడించబడుతుంది. పాడింగ్ సున్నాకి సెట్ చేయబడితే, అది కంటెంట్ యొక్క అంచుని కలిగి ఉంటుంది.
CSS పాడింగ్ విలువలు
CSS padding ఏ కాని ప్రతికూల పొడవు విలువ పడుతుంది. Px లేదా em వంటి కొలతను పేర్కొనండి. మీరు మీ padding కోసం ఒక శాతాన్ని కూడా పేర్కొనవచ్చు, ఇది మూలకం యొక్క కలిగిన బ్లాక్ యొక్క వెడల్పులో ఒక శాతంగా ఉంటుంది. ఇది పైన మరియు దిగువ పాడింగ్ కొరకు ఉంటుంది. ఉదాహరణకి:
#container {width: 800px; ఎత్తు: 200px; } #container p {width: 400px; ఎత్తు: 75%; పాడింగ్: 25% 0; }#container మూలకం లోపల పేరా యొక్క ఎత్తు #container యొక్క ఎత్తులో 75% ఉంటుంది మరియు టాప్ పాడింగ్ కోసం వెడల్పు 25% మరియు దిగువ పాడింగ్ కోసం వెడల్పు 25% ఉంటుంది. ఇది 300 + 200 + 200 = 700px గా ఉంటుంది.
CSS Padding జోడించడం యొక్క ప్రభావాలు
బ్లాక్-స్థాయి అంశాలపై , పాడింగ్ నాలుగు వైపులా వర్తించబడుతుంది. మూలకం ఇప్పటికే ఒక బ్లాక్ లేదా పెట్టె కనుక, పాడింగ్ బాక్స్ వైపులా వర్తించబడుతుంది.
ఇన్లైన్ మూలకాల్లో CSS పాడింగ్ జోడించబడినప్పుడు, నిలువు పాడింగ్ లైన్ లైన్ ఎత్తు మించి ఉంటే ఇన్లైన్ ఎలిమెంట్ పైన మరియు దిగువ అంశాలపై కొన్ని అతివ్యాప్తి చెందుతుంది, కానీ అది లైన్ ఎత్తును తగ్గించదు. ఇన్లైన్ మూలకాలకు వర్తించే క్షితిజసమాంతర CSS పాడింగ్ మూలకం యొక్క ప్రారంభంలో మరియు మూలకం యొక్క ముగింపుకు జోడించబడుతుంది. మరియు padding పంక్తులు మూసివేయాలని ఉండవచ్చు. కానీ అది బహుళ లైన్ మూలకం యొక్క అన్ని పంక్తులకు వర్తించదు, కాబట్టి బహుళ లైన్ ఇన్లైన్ కంటెంట్ విభాగంలో ఇండెంట్ చేయడానికి మీరు పాడింగ్ను ఉపయోగించలేరు.
అంతేకాకుండా, CSS2.1 లో, వెడల్పుల కోసం (లేదా పాడింగ్ వెడల్పు) కోసం వెడల్పు కోసం మూలకంపై ఆధారపడి వెడల్పు ఉన్న కంటైనర్ బ్లాక్స్ని మీరు సృష్టించలేరు. మీరు ఫలితం నిర్వచించబడకపోతే. బ్రౌజర్లు ఇప్పటికీ కంటెంట్లను ప్రదర్శిస్తాయి, కానీ మీరు ఆశించే ఫలితాలను పొందలేరు. మీరు దాని గురించి ఆలోచించినట్లయితే, మీ కంటైనర్ ఎలిమెంట్ దాని వెడల్పును నిర్వచించడానికి దాని బిడ్డ ఎలిమెంట్ల వెడల్పును తెలుసుకోవలసివచ్చినట్లయితే, ఇది ముందు నిర్వచించబడిన వెడల్పు లేనప్పుడు మరియు ఒకటి లేదా అంతకంటే ఎక్కువ కంటైనర్ మూలకం యొక్క శాతంగా ఒక వెడల్పు సెట్, ఇది సమాధానం లేకుండా ఒక వృత్తాకార గొలుసు అమర్చుతుంది. మీరు మీ పత్రంలోని ఏదైనా వెడల్పు కోసం శాతాలు ఉపయోగించినట్లయితే, పేరెంట్ ఎలిమెంట్ వెడల్పులను కూడా నిర్వచించవచ్చు.