CSS માં, Box Model એલિમેન્ટ કેવી રીતે સંરચિત અને વેબપેજ પર સ્થિત છે તે નક્કી કરવા માટે એક મહત્વપૂર્ણ ખ્યાલ છે. તેમાં મૂળભૂત ઘટકો જેવા કે સામગ્રી, Padding, Border અને Margin.
Content
Content તે વિસ્તાર છે જેમાં તત્વની વાસ્તવિક સામગ્રી શામેલ છે, જેમ કે ટેક્સ્ટ, છબીઓ અથવા વિડિયો.
સામગ્રીના કદને વ્યાખ્યાયિત કરવા માટે, અમે width અને height ગુણધર્મોનો ઉપયોગ કરીએ છીએ.
Padding
Padding સામગ્રીની આસપાસની જગ્યા છે, જે સામગ્રી અને તત્વ વચ્ચે અંતર બનાવે છે border.
મૂલ્યો સ્પષ્ટ કરવા માટે padding, અમે padding-top, padding-right,padding-bottom અને ગુણધર્મોનો ઉપયોગ કરીએ છીએ. padding-left
Border
આ Border તત્વની આસપાસની રૂપરેખા છે, જે સામગ્રી અને આસપાસના વિસ્તાર વચ્ચે સ્પષ્ટ સીમા બનાવે છે.
ફોર્મેટ કરવા માટે border, અમે border-width, border-style, અને border-color ગુણધર્મોનો ઉપયોગ કરીએ છીએ.
Margin
Margin એ તત્વની બહારની જગ્યા છે border, જે અન્ય તત્વો વચ્ચે અંતર બનાવે છે.
મૂલ્યોને વ્યાખ્યાયિત કરવા માટે margin, અમે margin-top, margin-right, અને ગુણધર્મોનો ઉપયોગ કરીએ છીએ. margin-bottom margin-left
ઇન CSS નો ઉપયોગ કરીને Box Model, અમે તેના ઘટકોના મૂલ્યોને સંશોધિત કરીને તેના કદ અને સ્થિતિને કસ્ટમાઇઝ કરી શકીએ છીએ.
ઉદાહરણ:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
ઉપરના ઉદાહરણમાં, વર્ગ સાથેના તત્વની .box પહોળાઈ 200px અને ઊંચાઈ 100px છે. તેની પાસે 20px, 1px ની જાડાઈ સાથેનું padding કાળું અને 10px છે. border margin
આ મૂલ્યોને સમાયોજિત કરીને, તમે તમારા વેબપેજ પર વિવિધ કદ અને અંતર સાથે ઘટકો બનાવી શકો છો. ના ઉપયોગ દ્વારા Box Model, તમે તમારા ઇન્ટરફેસમાં તત્વોની સ્થિતિ, કદ અને અંતર પર નિયંત્રણ ધરાવો છો.