Max-width in CSS – Property
max-width in CSS ek property hai jo kisi element ki maximum width define karti hai.
Iska matlab:
Element ki width isse zyada nahi hogi, lekin isse choti ho sakti hai.
Ye property especially useful hoti hai:
- Responsive design banane ke liye
- Different screen sizes par content readable rakhne ke liye
Problem with width
Agar hum normal width use karein:
Example situation:
Ek <div> ko width: 600px diya gaya hai aur margin: auto se center kiya gaya hai.
Agar browser window 600px se choti ho jaye, to:
- Content cut ho sakta hai
- Horizontal scrollbar aa sakta hai
Using max-width instead
Agar hum max-width in CSS use karein:
- Element ki width screen ke according adjust ho jayegi
- Small screens me content properly fit hoga
- Scrollbar ka issue avoid hota hai
Important Tip
Browser window ko 600px se chota karke test karo — tum clearly difference dekh paoge between width vs max-width.
Example Code
