સીએસએસ પેડિંગ એ સીએસએસ બૉક્સ મોડેલનાં ગુણધર્મો પૈકી એક છે. આ લહેરાતોની મિલકત એ HTML ઘટકની તમામ ચાર બાજુઓની આસપાસ પેડિંગ સેટ કરે છે. CSS પૅડિંગને લગભગ દરેક એચટીએમએલ ટેગ પર લાગુ કરી શકાય છે (કેટલાક ટેબલ ટેગ્સ સિવાય). વધુમાં, તત્વના તમામ ચાર બાજુઓ અલગ મૂલ્ય ધરાવે છે.
સીએસએસ પેડિંગ સંપત્તિ
લઘુલિપિ CSS પેડિંગ પ્રોપર્ટીનો ઉપયોગ કરવા માટે, તમે નેનોકૉક "ટ્રુબેલ" (અથવા તમારા માટે "ટ્રાઇબબ્લી" સ્ટાર ટ્રેક ચાહકો) નો ઉપયોગ કરી શકો છો. આ ટોચ , જમણી , નીચે , અને ડાબા માટે વપરાય છે , અને તે તમને લૅલેઅન્ડ પ્રોપર્ટીમાં પેડિંગ પહોળાઈના ક્રમમાં સંદર્ભિત કરે છે. દાખ્લા તરીકે:
ગાદી: ઉપર જમણો તળિયે ડાબી; પેડિંગ: 1 પીએક્સ 2px 3px 6px;જો તમે ઉપર સૂચિબદ્ધ મૂલ્યોનો ઉપયોગ કરો છો, તો તે કોઈપણ HTML ઘટકની દરેક બાજુ પર એક અલગ પેડિંગ મૂલ્ય લાગુ કરશે જે તમે તેને લાગુ કરો છો. જો તમે બધા ચાર બાજુઓ પર સમાન પેડિંગ લાગુ કરવા માંગો છો, તો તમે તમારા સીએસએસને સરળ બનાવી શકો છો અને એક મૂલ્ય લખી શકો છો:
ગાદી: 12 પીએક્સ;CSS ની તે લીટી સાથે, 12 પૅક્સેલ પેડિંગ તત્વના તમામ 4 બાજુઓ પર લાગુ થશે.
જો તમે ગાદી ઉપર અને નીચે અને ડાબી અને જમણી બાજુમાં જ કરવા માંગો છો, તો તમે બે મૂલ્યો લખી શકો છો:
ગાદી: 24px 48px;પ્રથમ મૂલ્ય (24px) ટોચ અને તળિયે લાગુ પડશે, જ્યારે બીજા ડાબી અને જમણી બાજુ પર લાગુ થશે
જો તમે ત્રણ મૂલ્યો લખો છો, તો તે આડી પૅડિંગ (ડાબા અને જમણે) તે જ બનાવશે, જ્યારે ટોચ અને તળિયે બદલાતી રહેશે:
ગાદી: ઉપર જમણે-ડાબા તળિયું; ગાદી: 0px 1px 3px;સીએસએસ બોક્સ મોડેલ મુજબ, ગાદી એ તત્વ / સામગ્રીની સૌથી નજીક છે. આનો અર્થ એ છે કે પેડિંગ સામગ્રીની પહોળાઈ અથવા ઊંચાઈ અને કોઈપણ સરહદ મૂલ્યો જે તમે ઉપયોગ કરો છો તે વચ્ચે એક ઘટકમાં ઉમેરવામાં આવે છે. જો ગાદી શૂન્ય પર સેટ છે, તો તે સામગ્રીની જેમ જ ધાર ધરાવે છે.
સીએસએસ પેડિંગ મૂલ્યો
સીએસએસ પેડિંગ કોઈ પણ બિન-નકારાત્મક લંબાઈ મૂલ્ય લઈ શકે છે. માપ સ્પષ્ટ કરવાની ખાતરી કરો, જેમ કે પીએક્સ અથવા એમ. તમે તમારા પેડિંગ માટે ટકાવારી પણ નિર્દિષ્ટ કરી શકો છો, જે એલિમેન્ટના બ્લોકની પહોળાઇની ટકાવારી હશે. તેમાં ટોચ અને તળિયે ગાદીનો સમાવેશ થાય છે દાખ્લા તરીકે:
# કોન્ટાઇનર {પહોળાઈ: 800px; ઊંચાઈ: 200 પીએક્સ; } # કન્ટેનર પી {પહોળાઈ: 400 પીએક્સ; ઊંચાઈ: 75%; ગાદી: 25% 0; }# કોન્ટાઇનર ઘટકની અંતર્ગત ફકરોની ઊંચાઈ # કોન્ટાઇનરની ઉંચાઈના 75% અને ટોચની પેડિંગ માટે 25% પહોળાઈ અને નીચલા પેડિંગ માટે 25% પહોળાઈ હશે. આ રકમ 300 + 200 + 200 = 700px છે.
સીએસએસ પૅડિંગ ઉમેરવાની અસરો
બ્લોક-લેવલના તત્વો પર, ચાર બાજુઓ પર પેડિંગ લાગુ પડે છે. કારણ કે તત્વ એ બ્લોક અથવા બોક્સ પહેલેથી જ છે, પેડિંગ બોક્સ બાજુઓ પર લાગુ થાય છે.
જ્યારે CSS પૅડિંગને ઇનલાઇન તત્વોમાં ઉમેરવામાં આવે છે, ત્યારે ઇનલાઇન ઘટકથી ઉપર અને નીચે કેટલાક ઘટકો હોઇ શકે છે જો ઊભી પેડિંગ વાક્યની ઊંચાઈથી વધી જાય, પરંતુ તે લીટીની ઊંચાઇને નીચે નહીં દબાણ કરશે. ઇનલાઇન ઘટકોને લાગુ કરવા માટે આડી CSS પેડિંગ એલિમેન્ટની શરૂઆત અને તત્વના અંતમાં ઉમેરવામાં આવશે. અને પેડિંગ લીટીઓ લપેટી શકે છે પરંતુ તે મલ્ટી-લાઇન તત્વની તમામ રેખાઓ પર લાગુ નહીં થાય, જેથી તમે મલ્ટિ-લાઇન ઇનલાઇન સામગ્રીના સેગમેન્ટને ઇન્ડેન્ટ કરવા માટે પેડિંગનો ઉપયોગ કરી શકતા નથી.
પણ, CSS2.1 માં, તમે કન્ટેનર બ્લોકો બનાવી શકતા નથી જ્યાં પહોળાઈ પહોળાઈ (અથવા પેડિંગ પહોળાઈ) માટેના ટકા સાથે તત્વ પર આધારિત હોય. જો તમે કરો તો પરિણામ અવ્યાખ્યાયિત છે. બ્રાઉઝર્સ હજી પણ સમાવિષ્ટો પ્રદર્શિત કરશે, પરંતુ તમે જે પરિણામોની આશા રાખતા હોય તે તમને મળતા નથી. જો તમે તેના વિશે વિચાર કરો, તો તે અર્થમાં છે, જેમ કે તમારા કન્ટેનર એલિમેન્ટને તેની પહોળાઈને વ્યાખ્યાયિત કરવા માટે તેના બાળ તત્વોની પહોળાઈને જાણવાની જરૂર છે-જેમ કે જ્યારે તેની પૂર્વ-નિર્ધારિત પહોળાઈ નથી અને એક અથવા વધુ છે કન્ટેનર તત્વની ટકાવારી તરીકે સેટ કરેલી પહોળાઈ, આ કોઈ જવાબ સાથે ગોળાકાર સાંકળ સુયોજિત કરે છે જો તમે તમારા દસ્તાવેજ પર કોઈપણની પહોળાઈ માટે ટકાવારીનો ઉપયોગ કરો છો, તો તમારે ખાતરી કરવી જોઈએ કે પિતૃ તત્વ પહોળાઈને પણ વ્યાખ્યાયિત કરવામાં આવે છે.