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

عناصر Block و inline در HTML

این جلسه راجع به عناصر 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

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۵

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

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

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین