• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



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

آموزش CSS (فصل پنجم - جلسه 1) : فضاهای اطراف عنصر

31465 ۱۳ آذر ۹۱
1 2 3

سلام دوستان. امیدوارم که حالتون خوب باشه، مدتی بود سرگرم کاری بودم به همین دلیل آماده کردن این آموزش کمی طول کشید و یک عذر خواهی به شما عزیزان که این آموزش ها رو دنبال می کنید بدهکارم. اما به امید خدا دیگه همچین اتفاقی نمیوفته و مطالب سر وقت خودشون یعنی هر سه روز آماده می شن . خب حالا بریم سر اصل مطلب :

در این قسمت از آموزش css با پنج ویژگی دیگر آشنا خواهیم شد، که به فضا های اطراف عنصر مربوط می شوند و عبارتنداز : margin و padding و  border و height و width .

برای آشنایی بهتر با این خصوصیات و مکان قرارگیری هر کدام در اطراف یک عنصر به تصویر زیر دقت کنید:

خب اگر گیج شدید کمی درمورد تصویر توضیح میدهیم : در وسط قسمت سفید رنگ عنصر ما قرار دارد که هر عنصری نیز ارتفاع (height) و عرض (width) مشخصی دارد. برای تعیین فاصله متن درون عنصر از  حاشیه (border)، از padding استفاده میشود. Border هم که حاشیه دور عنصر است، و margin نیز فاصله عنصر از عناصر اطراف آن را مشخص می کند.

حال به تعریف دقیق تر به همراه مثال برای هر خاصیت می پردازیم :

خصوصیت margin

این خصوصیت فضای خالی بیرونی عناصر را مشخص می کند، یعنی فضای خالی بین عنصر و پنجره ی مرورگر یا فضای خالی بین دو عنصر را مشخص می کند. یکی از سه مقدار عددی، درصدی یا auto را می پذیرد:

  • Margin-top : فاصله بالای عنصر را مشخص می کند.
  • Margin-right : فاصله سمت راست عنصر را مشخص می کند.
  • Margin-bottom : فاصله پایینی عنصر را مشخص می کند.
  • Margin-left : فاصله سمت چپ عنصر را مشخص می کند.

مقدار پیشفرض auto  می باشد در ضمن استفاده از مقادیر منفی نیز مجاز است.

مثال :

دستور فوق حاشیه بالای سند را حذف می کند.

درضمن می توان بجای نوشتن هر چهار خصوصیت از حالت کوتاه نویسی نیز استفاده کرد. در حالت کوتاه نویسی می توان از یک تا چهار به مقدار به خصوصیت margin داد.

کوتاه نویسی خصوصیت Margin

در صورت استفاده از یک مقدار در کوتاه نویسی این مقدار به هر چهار فاصله بیرونی تخصیص خواهد یافت.

مثال :

دستور فوق تمامی فاصله های بیرونی عنصر body  را (top , right , bottom , left) را برابر 5px قرار می دهد.

هنگام استفاده از دو مقدار در کوتاه نویسی مقدار اول bottom , top و مقدار دوم right , left را مشخص می کند.

مثال :

دستور فوق فاصله بالا و پایین (top , bottom) را برابر 2px و حاشیه چپ و راست را (right , left) را برابر 5px  تعریف می کند.

در صورت استفاده از سه مقدار در کوتاه نویسی مقدار اول top، مقدار دوم left، مقدار سوم right و مقدار چهارم bottom را مشخص می کند.

مثال :

دستور فوق top  را برابر 20px، خصوصیت left  و right را برابر 30px و مقدار سوم bottom را برابر 40px قرار می دهد.

در صورت استفاده از چهار مقدار در کوتاه نویسی مقدار اول top مقدار دوم right مقدار سوم bottom و مقدار چهارم left  را مشخص می کند.

مثال :

دستور فوق top  را برابر 2px، مقدار right را برابر 3px، مقدار bottom را برابر 5px و مقدار left را برابر 4px  قرار می دهد.

1 2 3
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 13 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    لقمان آوند(۱۴ آذر ۱۳۹۱)

    عالی بود سجاد جان .
    مثل آموزش های قبلی …

  • ‏‏
    محمود(۱۵ آذر ۱۳۹۱)

    سلام
    سایت به این شیکی واقعا نوبره!!!
    😯

  • ‏‏
    محمود(۱۵ آذر ۱۳۹۱)

    اگه لطف کنید سایه پیش فرض متن مطالب رو بردارید ممنون میشم. کور میشه آدم اگه بخواد چند خط بخونه واسه همین بیخیال خوندن میشه.
    مرسی

    • ‏‏
      لقمان آوند(۱۵ آذر ۱۳۹۱)

      سلام جناب محمود
      چشم ، سایه متن بسیار کمرنگ شد.
      ممنون از پیشنهادتون .
      موفق باشید

  • ‏‏

    سلام
    خیلی ممنون خیلی خوب بود .

  • ‏‏

    عالی بود فقط یه چیزی شما کل مباحث سی اس اس رو می خواهید بگید

  • ‏‏

    سلام …
    من مقدار auto در خاصیت margin رو متوجه نشدم چیکار میکنه ..
    میشه با یه مثال بهم توضیح بدید؟

    • ‏‏
      سجاد دریس(۱۶ مرداد ۱۳۹۲)

      سلام.
      مثال زیر رو ببینید،
      http://uploadtak.com/images/p936_margin.rar
      کدهارو بخونید متوجه خواهید شد.

  • ‏‏

    آقا سجاد سلام
    با تشکر ویژه بابت آموزش مکفی شما
    آیا فکر نمی کنید که این عبارت «در صورت استفاده از سه مقدار در کوتاه نویسی مقدار اول top، مقدار دوم left، مقدار سوم right و مقدار چهارم bottom را مشخص می کند.» دارای اشکال است، زیرا اگر ما سه مقدار در کوتاه نویسی دادیم، مقدار چهارم دیگر چیست؟ در هر حال، اگر سه مقدار دهیم، هر مقدار مربوط به کدامیک از جهات چهارگانه است؟
    با تشکر

    • ‏‏
      سجاد دریس(۱۵ شهریور ۱۳۹۲)

      سلام.
      بله اشکال در جمله هست که باید به این صورت باشه «در صورت استفاده از سه مقدار در کوتاه نویسی مقدار اول top، مقدار دوم left و right و مقدار سوم bottom را مشخص می کند.»

  • ‏‏

    سلام.
    لطفا این نکته مهم رو به متن اضافه کنید:
    وقتی با استفاده از مقدار auto برای خصوصیت margin عنصر رو راست چین، وسط چین و چپ چین می کنیم، حتما باید با خصوصیت width عرض مشخصی برای عنصر تعیین کنیم (توی تگ HTML اون نه، توی CSS) وگرنه کد کار نمی کنه.
    حالا سوال من اینه که چجوری کاری کنیم که بدون تعیین عرض کد کار کنه یا نیازی نباشه ما عرض رو تعیین کنیم، خودش عرض اصلی فایل رو تعیین کنه؟

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram