تفاوت فی مابین 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 میباشد .

راهنمای کاربردی پیاده سازی تارنما خوشگل (قسمت نهایی)