آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

عناصر Block و inline در HTML

inline and block elements

فصل سوم ( معرفی ساختار  HTML4 )

جلسه چهارم (عناصر Block و  inline در HTML )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

این جلسه راجع به عناصر Block و  inline در HTML صحبت می کنیم . فکر می کنم تا بحال با این اسامی برخورده باشید . اگر هم در رابطه با این عناصر اطلاعاتی ندارید ، نگران نباشید براتون بصورت کامل توضیح میدم .

عناصر Block

به عناصری که یک خط رو به صورت کامل اشغال می کنن Block میگیم ؛ چه داخل عنصر محتوا بصورت کامل قرار بگیره چه در حد چند کلمه ی کوتاه باشه ، در هر صورت یک خط رو به صورت کامل دربرمیگیره و محتوای عنصر بعدی به خط بعد منتقل میشه .

مثلا عناصر <p> , <hn> , <li> جزو عناصر Block هستند . برای درک بهتر به مثال زیر دقت کنید :

تو این مثال ما از دو عنصر <p> و <h2> استفاده کردیم . اگر این کد رو اجرا کنید میبینید که با وجود اینکه ما فضای کافی برای کنار هم قرار گرفتن این دو جمله رو داریم ، اما دو جمله هر کدوم تو یک خط قرار گرفتند .

block element

به این عناصر ، عناصر Block میگیم . یک خط رو بصورت کامل در اختیار خودشون قرار میدن .

عناصر inline

عناصری که به اندازه ی محتوای خودشون فضارو اشغال می کنن ، عناصر inline میگیم . زمانی که دو عنصر inline کنار هم قرار میگیرند ، محتوا هم کنار هم قرار میگیرند و هر کدوم تو یک خط قرار نمیگیرند . به مثال زیر دقت کنید :

 نتیجه ی این کد :

inline

همونطور که در نتیجه ی کار دیدید ، دو جمله کنار هم قرار گرفتند و عناصر به اندازه ی محتوای داخلشون فضارو اشغال کردن . به این عناصر inline یا درون خطی میگیم . حالا به کد زیر دقت کنید :

 نتیجه ی کد بالا :

inline element

همونطور که ملاحظه میکنید ، تو این کد ما به عنصر span خاصیت margin  و  padding دادیم ، خاصیتی که به درون خط مربوط میشد ، اعمال شد اما خاصیتی که به بالا و پایین خط مربوط میشد ، اعمال نشد . یعنی padding-top و  padding-bottom و  margin-top و  margin-bottom روی عنصر اعمال نشد . برای اینکه بتونیم این خاصیت هارو به عناصر inline نسبت بدیم . باید عنصر inline رو تا حدودی با عنصر block ترکیب کنیم ، که هم حالت inline بودنش حفظ بشه و هم خاصیتی مثل margin-top روش اعمال بشه . برای این کار کافیه به این عنصر خاصیت inline-block بدیم . به کد زیر دقت کنید :

 نتیجه ی کد بالا :

inline element

ببینید با اضافه کردن display:inline-block به استایل عنصر ، حالا هم خاصیت های padding-top و  padding-bottom و  margin-top و  margin-bottom روی عنصر inline ما اعمال شد و هم حالت inline بودنشو حفظ کردیم .

حالا اگه بخوایم عناصر Block رو از حالت block خارج کنیم تا کنار هم قرار بگیرند باید بسته به احتیاج خودمون به اونا خاصیت inline-block یا inline بدیم . که این کار رو از طریق css انجام میدیم . به کد زیر دقت کنید :

 نتیجه ی کد بالا :

4

تو کد بالا ما به عناصر li که عناصر block هستند ، خاصیت inline دادیم تا کنار هم قرار بگیرند و یک منو رو تشکیل بدهند .

نکته آخر اینکه ، برای استاندارد سازی کار خودتون ، هیچگاه عناصر Block رو درون عناصر inline قرار ندید . به عنوان مثال عنصر <p> یک عنصر block هست و عنصر <span> یک عنصر inline هست . ما نباید عنصر <p> رو درون عنصر <span> به کار ببریم . شما مجاز هستید که عناصر inline رو درون هم و یا درون یک عنصر block قرار بدید اما هیچگاه مجاز نیستید که عناصر block  رو درون عناصر inline قرار بدید .  هرچقدر هم که از طریق استایل دهی به عناصر خاصیت های block و  inline بدید ، اما نمیتونید دراین مواقع خاصیت پیشفرض و اصلی این عناصر رو تغییر بدید .

مثلا اگر شما به عنصر <p> خاصیت inline بدید ، بازهم مجاز نیستید که این عنصر رو درون عنصر <span> به کار ببرید  ، این تو استانداردهای HTML نیست . چون به اصطلاح <p> ذاتا خاصیت block داره 🙂

inline-block

فکر می کنم توضیحات کافی برای این عناصر داده شد . امیدوارم مفید واقع شده باشه .

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • محمد

    سلام
    ضمن تشکر از مطالب خوبتون خواستم بگم من از اول مباحث HTML تا اینجا رو خوندم.به نظر شما یه طراح وب یعنی کسی که تنهایی میتونه یه سایتو جم و جور کنه چیا باید یاد بگیره؟
    مرسی

    • میترا رحیمی

      سلام دوست عزیز
      به نظر من یه طراح وب که بخواد بصورت تخصصی کار کنه باید تو یه زمینه کسب علم کنه و خودش رو ارتقاء بده ، اما تو ایران معمولا یک نفر از گرافیک شروع میکنه تا html و وردپرس و … آموزش میبینه و به تنهایی یه سایت رو خودش راه اندازی می کنه . باید ببینید خودتون چه شرایطی دارید . اگر شرایط کار گروهی رو ندارید و میخواین تو این زمینه کسب درآمد کنید از مباحث گرافیکی شروع کنید ، بعد برید سراغ html و css3 تا بتونید خودتون یه پروژه رو ببندید . اما اگر بتونید با یه نفر دیگه همکاری داشته باشید و خودتون فقط تو یه زمینه مثلا کدنویسی کسب علم کنید خیلی بهتره ، چون میتونید تمام وقتتون رو بذارید و تو این زمینه پیشرفت کنید و خودتون رو ارتقاء بدید چون دنیای وب یه دریاست و باید هروز خودتون رو با استانداردها بروز کنید . باز به شرایط خودتون نگاه کنید .
      موفق و پیروز باشید.

  • سعید

    سلام واقعا دستتون درد نکنه من همیشه با این قضیه block و inline مشکل داشتم. خیلی از گره های ذهنیم باز شد.

    • میترا رحیمی

      سلام دوست عزیز
      خداروشکر که براتون مفید بوده.

  • علیرضا کریمی نژاد

    واقعا ممنون از این توضیحات شفاف و زلالتون

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟