آموزش کار با ویژگی های Height و Width در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی های Height و Width در CSS با من همراه باشید.

آموزش کار با ویژگی های Height و Width در CSS

Free-Learn

کار با ویژگی های Height و Width در CSS

ویژگی های Height و Width همونطور که مشخصه اولی برای تنظیم اندازه ارتفاع (طول) یک عنصر و ویژگی Width برای تنظیم اندازه عرض یک عنصر بکار برده می شود.

به این نکته باید توجه کنیم که اندازه عرض و طول یک عنصر بصورت مستقیم محاسبه می شود، خب یعنی چی بصورت مستقیم!؟ یعنی اینکه اگه من بفرض مثال به عنصر پاراگرافم ۱۰ پیکسل پدینگ ( Padding ) و ۲۰ پیکسل مارجین ( Margin ) دادم این مارجین و پدینگ جدا حساب میشه و اندازه عرض و طولی که دادم هم جدا حساب میشه.

در نتیجه اندازه کل یک عنصر میشه جمع تمامی مقادیر ویژگی های Margin,Padding,Border ، پس بهمین خاطر ما باید به نسبت اندازه هایی که برای مارجین و پدینگ مشخص میکنیم اندازه طول و عرض مون رو نیز مشخص کنیم تا در هنگام نمایش مشکلی نداشته باشیم.

پیشنهاد میکنم حتما آموزش مدل باکس را در CSS مشاهده نمایید تا بطور کامل متوجه حرفی که کمی بالاتر زدم شوید.

مقادیری که ویژگی های Height و Width میتوانند بپذیرند مقادیر زیر می باشند :

  • auto – مرورگرها بصورت خودکار اندازه را تنظیم میکنند
  • length – تنظیم اندازه با استفاده از واحدهای پیکسل و دیگر واحدهای اندازه گیری
  • % – تنظیم اندازه بصورت درصدی
  • initial – تنظیم اندازه با مقادیر پیش فرض
  • inherit – تنظیم اندازه با استفاده از مقادیر والد یا پدر

Free-Learn

مثال شمره ۱ : استفاده از مقدار پیکسل (px)

امتحان کنید

مثال شماره ۲ : استفاده از مقدار درصدی (%)

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب