تفاوت بین display های block و inline و inline-block

در این مقاله قصد داریم تا تفاوت بین display های block و inline و inline-block را بررسی کنیم و یکبار برای همیشه این موضوع را به اتمام برسانیم ، اما بهتر است برای تفهیم موضوع ، از یک بخش مناسب تر شروع به توضیح کنیم تا ذهن شما خواننده گرامی نیز آماده شود . تگ a و تگ span دو مورد از تگ هایی هستند که در زبان نشانه گذاری html وجود دارند و جهت تنظیم عناصر صحیح در صفحه به شما کمک خواهند کرد . اگر در حال مطالعه این مقاله هستید مطمئنا با مفاهیم تگ و html آشنایی دارید . اما بد نیست تا یک توضیح مختصر در این قسمت ارائه کنیم . تمامی وب سایت های موجود در دنیا همگی دارای یک اسکلت و ستون بندی واحد هستند که این ستون بندی و اسکلت بندی توسط یک زبان به نام اچ تی ام ال ایجاد می شود .

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

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

پس برای داشتن یک وب سایت با ظاهری قابل قبول حداقل به دو زبان اچ تی ام ال و سی اس اس نیاز داریم . در این مقاله از این به بعد کمی تخصصی تر بر روی موضوع اصلی تمرکز می کنیم . زمانی که یک طراح ( شحصی که به css تسلط دارد ) قصد دارد تا برای المان های تگ a و تگ span استایل نویسی کند ( کار با دستورات زبان css بر روی تگ های اچ تی ام ال جهت رنگ و لعاب دادن و نظم دادن و … استایل نویسی نام دارد ) با یک مسئله مشترک روبرو می شود .

در داخل سطوح نمایش تگ ها در html و css سه حالت نمایشی وجود دارد :

حالت اول ، حالت نمایش به صورت بلوکی ( display : block ) که در این حالت تگ استفاد شده در صفحه ، تمامی ردیفی که داخل آن قرار دارد را پوشش داده و به تگ دیگری اجازه حضور در کنار آن را جهت نمایش نخواهد داد . از مهم ترین تگ های html که این خاصیت نمایش را دارند میتوان تگ div و table و H1 … H6 و form و section و article و header و footer و aside و nav و li و ul و video و header و چند تگ دیگر را نام برد که همگی این خاصیت نمایشی را دارند .

برخی دیگر از تگ های html ، خاصیت display را با ویژگی دیگری به نام inline دارند . در این حالت خاصیت display آن تگ به شکلی خنثی است به این معنی که اگر تگ هایی که همگی خاصیت display با مقدار inline دارند داخل کد ، کنار هم نوشته شوند ، در خروجی نمایشی ، تمامی آنها در یک ردیف کنار هم قرار خواهند گرفت و همانند حالت block دیگر تمامی خود ردیف را پوشش نخواهد داد . به مثال زیر توجه کنید :

اما خوشبختانه میتوان در سی اس اس ، هر خاصیتی را تغییر داد ، یعنی میتوان خاصیت display : block را به display : inline تغییر داد . تمامی تگ های داخل صفحه وب ، display با مقدار block یا inline دارند . اما فرق بین این دو چیست ؟

تفاوت بین display : block و display : inline

اولین تفاوت بین این دو مقدار برای دستور display در بالا بررسی شد . این بود که اگر تگی ویژگی display : block را به شکل پیشفرض داشته باشد ( همانند تگ های معرفی شده در بالا ) و یا توسط css از مقدار inline به مقدار block تغییر کند ، آن تگ در حالت نمایشی ، یک بلوک کامل به شکل عرضی از صفحه سایت شما را پوشش خواهد داد ، اما تگ هایی با خاصیت display : inline در همان اندازه خودشان ، فضای اطراف را اشغال خواهند کرد .

تفاوت بعدی در میزان استایل پذیری این تگ ها است . اگر شما قصد داشته باشید تا به یک تگ با خاصیت display : block مقدار width و height یعنی ویژگی های عرض و ارتفاع اعمال کنید ، بدون هیچ مشکلی عرض و ارتفاع تگ مدنظر به اندازه های دلخواه شما تغییر خواهد کرد . برای مثال اگر عرض صفحه شما 1400 پیکسل است و شما یک تگ div در داخل صفحه با استایل پیشفرض دارید ، عرض این تگ div بخاطر خاصیت display : block ، دقیقا برابر با 1400 پیکسل خواهد بود . اما اگر عرض این تگ را به 200 پیکسل کاهش دهید ، اکنون عرض آن با توجه به خاصیت display : block بودن پیشفرض تگ div ، به 200 پیکسل کاهش پیدا خواهد کرد و اگر این تگ خاصیت ارتفاع و یک رنگ نیز برای پس زمینه داشته باشد ، این کاهش عرض را در نمایش بخوبی مشاهده خواهید کرد و نهایتا یک فضای خالی در باقی مانده بلوک وجود خواهد داشت . اما شما نمیتوانید در این فضای خالی و به عبارتی در کنار این تگ ، تگ دیگری را جهت نمایش قرار دهید ، به این دلیل که با وجود کم شدن عرض تگ div و ایجاد 1200 پیکسل فضای خالی در کنار آن ، بازهم به دلیل خاصیت display : block برای تگ div ، تمامی ردیف و بلوکی که تگ div داخل آن قرار دارد متعلق به div و تحت اختیار اوست . دقیقا همانند تصاویر بالا !

اما در حالتی که display : inline برای تگی تعریف شده است نمیتوانید ویژگی های width و height را به تگ مدنظر اختصاص دهید . دو مورد از تگ های معروف و کاربردی که به شکل پیشفرض display : inline دارند تگ a و تگ span هستند که طراحان هنگام استایل دهی به این المان ها خصوصا در بخش width و height با مشکل روبر هستند به این دلیل که این تگ ها به شکل پیشفرض خاصیت display : inline دارند و برای اینکه بتوان به یک تگ با خاصیت display : inline مقادیر width و height را اعمال نمود باید نوع display آن تغییر کند ! یعنی با تغییر مقدار ویژگی display از inline به block ، میتوان به تگ a و تگ span نیز عرض و ارتفاع داد .

دستور display با مقدار inline-block

اکنون یک مشکل و یک سوال وجود دارد . با اعمال display : block به یک تگ ، همانطور که در بالا گفته شد ، تگ مدنظر تمامی بلوک و ردیف المان بزرگتر خود را پوشش خواهد داد . یعنی اگر تگ span مستقیما در داخل تگ body شما قرار گرفته باشد ، با تغییر display : inline در تگ span به display : block ، این تگ تمامی عرض صفحه را پوشش خواهد داد . اگر لازم باشد تا چندین تگ span یا تگ a را در کنار هم بچینیم و به آنها ویژگی عرض و ارتفاع نیز اعمال کنیم ، اگر خاصیت display : inline آنها به display : block تغییر کند ، این تگ ها ویژگی عرض و ارتفاع را قبول خواهند کرد اما در کنار هم قرار نخواهند گرفت و مجددا یک بخش خالی در اطراف آنها ، سراسر یک بلوک را پوشش خواهد داد . برای اینکه تگ هایی با خاصیت display : inline یا display : block را بتوان در کنار یکدیگر با اعمال خاصیت های width و height قرار داد ، باید از display با مقدار inline-block استفاده کرد .

زمانی که از display با مقدار inline-block برای تگ a و تگ span استفاده می شود ، هم میتوان این المان ها در خروجی نمایشی در کنار هم قرار داد و هم اینکه ویژگی عرض و ارتفاع را نیز به آنها اعمال کرد . همچنین در تگ هایی با خاصیت display : block همچون تگ Div نیز میتوان با تغییر حالت block به inline-block ، فضای احتکار شده توسط خاصیت block را از بین برده ، المان ها را در صفحه کنار هم قرار داد و برای آنها عرض و ارتفاع تنظیم کرد . درحقیقت inline-block ترکیبی از inline و block است که خاصیت عرض و ارتفاع پذیری را از block و خاصیت کنارهم قرارگیری را از inline به ارث برده است . این ساده ترین و روان ترین توضیح ممکن درباره ویژگی display با سه مقدار inline  و block و inline-block است .