تنظیم طول و عرض عناصر در CSS
تنظیم طول و عرض عناصر در CSS
خصوصیات مربوط به ابعاد در CSS به شما این امکان را می دهد تا عرض(width) و ارتفاع(height) یک عنصر را کنترل کنید.
مثال - خودتان امتحان کنید
تنظیم ارتفاع عناصر
این مثال نشان می دهد که چگونه ارتفاع عناصر مختلف را تنظیم کنیم.
تنظیم ارتفاع یک عکس به درصد
این مثال نشان می دهد که چگونه ارتفاع یک عنصر را به درصد (%) تنظیم کنیم.
تنظیم عرض به پیکسل
این مثال نشان می دهد که چگونه عرض یک عنصر را به پیکسل تنظیم کنیم.
تنظیم حداکثر ارتفاع یک عنصر
این مثال نشان می دهد که چگونه حداکثر ارتفاع یک عنصر را تنظیم کنیم.
تنظیم حداکثر عرض یک عنصر به درصد
این مثال نشان می دهد که چگونه حداکثر عرض یک عنصر را به درصد (%) تنظیم کنیم.
تنظیم حداقل ارتفاع یک عنصر
این مثال نشان می دهد که چگونه حداقل ارتفاع یک عنصر را تنظیم کنیم.
تنظیم حداقل عرض یک عنصر به پیکسل
این مثال نشان می دهد که چگونه حداقل عرض یک عنصر را به پیکسل تنظیم کنیم.
کلیه خصوصیات مربوط به ابعاد
شماره ای که در ستون css ذکر شده، نشان می دهد که خصوصیت مورد نظر در کدام نسخه CSS تعریف شده است.
خصوصیت | توضیحات | مقادیر | CSS |
---|---|---|---|
height | تنظیم ارتفاع یک عنصر | auto length % inherit |
1 |
max-height | تنظیم حداکثر ارتفاع یک عنصر | none length % inherit |
2 |
max-width | تنظیم حداکثر عرض یک عنصر | none length % inherit |
2 |
min-height | تنظیم حداقل ارتفاع یک عنصر | length % inherit |
2 |
min-width | تنظیم حداقل عرض یک عنصر | length % inherit |
2 |
width | تنظیم عرض یک عنصر | auto length % inherit |
1 |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 28059
دیدگاهها
salam va arze adab
bebakhshid aya max-width ham ruye anasore block tasir nadare?
سلام. ویژگی max-width روی عنصر div که یک عنصر block هست تاثیر داره. در مورد بقیه ی عناصر بلاک باید تحقیق کنید.
با سلام من اگر بخوام یک عنصر تو همه ی مرورگر ها وسط در وسط بیفته باید چیکار کنم چند روزی هست درگیرم عکس که برای بادی انتخاب میکنم دقیقا تو موبایل و دسکتاپ وسط بیفته
سلام. لطفا مقاله ی زیر رو مطالعه کنید:
www.beyamooz.com/css/595-css-responsive/4932-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%DA%AF%D8%B1%D8%A7%DB%8C%DB%8C-%D8%AF%D8%B1-css-%D8%B9%DA%A9%D8%B3-%D9%87%D8%A7
سلام
سایت شما یکی از بهترین هاست و در خیلی موارد به من کمک کرده خصوصا در بخش های css
تشکر از شما
سلام
شما لطف دارید. خوشحالیم که تونستیم رضایت شما رو جلب کنیم.
در min-width سایز رو تا600 هم که تغییر میدم تفتوتی ایجاد نمیشه،چرا؟
توجه داشته باشید که min-width روی عناصر block تأثیری نخواهد داشت و ابتدا باید عنصر مورد نظر را با استفاده از خصوصیت float یا display تبدیل به یک عنصر inline کرد.