در طراحی سایت و صفحات وب، تنظیم مناسب عرض و ارتفاع عناصر از اهمیت بسیار بالایی برخوردار است. این موضوع در طراحی responsive (واکنش گرا) به خوبی خودش را نشان می دهد و اگر ما دانش کافی برای تنظیم عرض و ارتفاع عناصر را نداشته باشیم، طراحی واکنش گرا بسیار سخت خواهد شد. به مثال زیر توجه کنید:
در این مثال با استفاده از ویژگی width عرض عنصر div را 100% تعیین کرده ایم. این بدان معناست که این عنصر تمام عرض صفحه را اشغال کند و هیچ عنصر دیگری را در کنار خود نپذیرد. نتیجه کد بالا به شکل زیر است:
تنظیمات ارتفاع و عرض در CSS
مشخصه های (ارتفاع) height و (عرض) width برای تنظیم کردن ارتفاع و عرض عنصرها به کار می روند. مشخصه های ارتفاع و عرض شامل padding, borders, margins نمی شوند. بلکه در فضای داخل هر عنصر ارتفاع و عرض را مشخص می کنند.
مقادیر ارتفاع و عرض در CSS
- auto - این مقدار بصورت پیش فرض وجود دارد و مرورگر ارتفاع و عرض را بصورت خودکار تعیین می کند.
- length - ارتفاع یا عرض را در واحدهای px, cm و ... مشخص می کند.
- % - ارتفاع یا عرض را به صورت درصدی از بلاک کلی صفحه مشخص می کند.
- initial - با مقدار پیش فرض
- inherit - با استفاده از مقدار والد
برای درک بهتر این موضوع در طراحی سایت به مثال های زیر توجه کنید:
در مثال بالا، عنصر div شامل یک عرض 200px و ارتفاع 50% است. همینطور این بلاک را با رنگ powderblue رنگ کرده ایم که ابعاد آن مشخص باشد. نتیجه کد بالا به شکل زیر است:
max-width (حداکثر عرض) در css
در طراحی سایت، مشخصه max-width برای تنظیم کردن حداکثر عرض یک عنصر می باشد. این مشخصه می تواند در واحدهای طولی مانند پیکسل، سانتی متر و... و یا در واحد درصدی و یا بصورت none (که به این معنا می باشد که هیچ عرض حداکثری وجود ندارد) باشد. عنصر div در مثال بالا زمانی مشکل ساز می شود که پنجره ی مرورگر از عرض عنصر کوچک تر باشد (یعنی عرض مرورگر از 500px کمتر شود). سپس مرورگر یک آیتم عرضی اسکرول به صفحه اضافه می کند که اصلا برای سایت و تجربه کاربری کاربر مناسب نیست.
در این مثال عرض عنصر div 500px در نظر گرفته شده است:
نکته: توجه داشته باشید که مقدار مشخصه max-width ، width را نادیده می گیرد.
در این مثال نیز، مقدار max-width مساوی با 500px در نظر گرفته شده است، یعنی این عنصر تحت هر شرایطی نمی تواند بیش از 500px عرض با به خود اختصاص دهد:
حال به صورت خلاصه تمام مشخصه های Dimension در CSS را در جدول زیر آورده ایم:
