تفاوت المان inline و block | تگ span

با نام و یاد خدای مهربون. سلام خدمت تمام کاربران عزیز
در این جلسه می خواهیم با دو مفهوم مهم inline  و block آشنا شویم. این دو مفهوم به نحوه نمایش المان ها در حالت پیش فرض مربوط می شود. در حین آموزش امروز با تگ span در html که خیلی ساده و پرکاربرد می باشد هم آشنا خواهیم شد. بی مقدمه بحث امروز رو شروع می کنیم.

در آموزش زیر به سوالات زیر پاسخ می دهیم:

  • مفاهیم inline و block چیست؟
  • تفاوت المان inline و block چیست؟
  • تگ span چیست؟
  • و…

با ما همراه باشین  ;-) 

تفاوت المان inline و block

هر المانی در html به صورت پیش فرض دو حالت نمایش دارد :

  • Inline (درون خطی)
  • block (بلاک)

نوع نمایش Block

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

از المان هایی که تا به حال درس دادیم المان های <p> ،<ul> ،<div>،<h6>…<h1> ،<ol> از نوع block هستند.

خب وقتشه که یک مثال بزنیم.

مثال:

توضیح:

کد بالا خیلی راحت است و المان ها و استایل هایی است که تا به حال درس داده ایم فقط خلاصه اینکه سه تا div داریم که خاصیت عرض را برای div اول و دوم مشخص کردیم . داخل div دوم یک تگ h4 تعریف کردیم حالا می خواهیم نوع نمایش این المان ها را در مرورگر ببینیم.

نتیجه:

همانطور که در مرورگر نمایش می دهد:

هر div ای در یک خط به صورت تمام عرض قرار گرفته است مثلا div اول تمام عرض مرورگر را گرفته و div دوم به خط بعدی هدایت شده است .حتی با تعریف خاصیت width:400px برای div اول باز هم تمام عرض والدش که مرورگر می باشد را گرفته است. می توانیم از طریق inspect element محدوده هر المان را مشاهده کنید. پس div خاصیت block دارد. المان h4 و p هم در شکل زیر بررسی شده و همانطور که مشخص است هر کدام تمام عرض عنصر والد خود را گرفته اند.

المان inline | المان block | تگ span | مثال برای نمایش block

نوع نمایش inline

المان inline درست عکس block می باشد. المان ها با خاصیت inline فقط به اندازه ای که نیاز دارند ، عرض المان والد خود را می گیرند و المانهای بعدی در صورتی که از همین نوع باشند در ادامه این المان قرار می گیرند و به خط بعد هدایت نمی شوند. نکته جالب این است که حتی حتی حتی دادن width و height روی این نوع المان ها هیچ تاثیری نخواهند داشت.

المان های <img> ،<a>،<span>، <b>، <br> از نوع inline هستند. قبل از اینکه سراغ مثال برای نمایش inline برویم خواهیم گفت تگ span چیست؟

تگ span چیست؟

این تگ به خودی خودی کار خاصی انجام نمی دهد و هر چه بین این تگ نوشته شود بدون هیچ تغییری در مرورگر نمایش داده می شود فقط با استفاده از تگ span می توانیم یک قسمت از متن را استایل خاصی بدهیم همین! این تگ از نوع inline می باشد.

مثال:

توضیح:

پیشنهاد می کنم این کد رو خودتون بزنید تا دقیقا متوجه نحوه استفاده از المان ها و استایل ها شوید. در مثال بالا یک تگ div و یک تگ h4 با کلاس one و two تعریف کردیم، داخل هر کدام، از تگ هایی با نمایش inline و block استفاده شده تا تفاوت این دو نوع نمایش عیان تر باشد. در این مثال عمدا به المان inline عرض و ارتفاع (width و height) دادیم تا در نتیجه ببینید که این عرض و ارتفاع ها هیچ تاثیری روی المان ها inline ندارند

نکته: margin و padding  روی المان های inline تاثیر گذارند ولی فقط در راستای افقی عناصر را هول می دهند نه عمودی.(در آموزش جلسه بعد برای این نکته مثال می زنیم)

نکته: در این مثال برای دادن استایل های متفاوت به هر کدام از تگ های a در  div های one و two از سلکتور “نام کلاس والد + نام المان” استفاده کردیم.

نتیجه:

همانطور که در مرورگر نمایش می دهد:

تگ p ، div ، h که از نوع block هستند بنابراین به اندازه والد خود رشد می کنند و عرض و ارتفاع (width و height) روی این المان ها موثر است اما تگ a، img،span چون از نوع inline می باشند فقط به اندازه محتوای خود رشد کرده و خاصیت عرض و ارتفاع (width و height) روی آن ها موثر نیست. 

المان inline | المان block | تگ span | مثال برای نمایش inline

از این لینک می توانید اطلاعات دقیق تری به دست بیاورید و با تمام المان های inline و block آشنا شوید.

در واقع این جلسه پیش زمینه ای برای آموزش جلسه بعد بود، در جلسه بعد می خواهیم به یک خاصیت مهم به نام display در css بپردازیم که می تواند نحوه نمایش المان ها در صفحات وب را تغییر دهد مثلا می توانیم کاری کنیم که المان های  inline بتوانند عرض و ارتفاع بگیرند و …

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

خلاصه جلسه امروز به شرح زیر می باشد:

تگ
نام توضیح
span بدون هیچ تغییری متن را اضافه می کند . فقط برای استایل دهی به قسمتی از متن به کار می رود
انواع نمایش المان ها
block تمام عرض والد خود را پوشش می دهد
inline فقط به اندازه نمایش محتوای خود عرض والد را پوشش می دهد

 


باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید  ;-) 

به این مقاله چند تا ستاره میدی؟
[تعداد رای: 2 امتیاز: 5]