بخش Vip سئو نود

بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است

جزئیات بیشتر
آموزش یکبار برای همیشه
تخفیف ویژه سئو نود تنها یکبار در سال و بدون افزایش قیمت دوره ها برای تمامی کاربران عزیز سایت %25 تخفیف فوق العاده تنها تا 3 فروردین 1402 با کد Norooz1402

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

مقالات طراحی سایت

در این مقاله یکبار برای همیشه تفاوت بین سه مقدار نوع نمایشی یعنی display های inline , inline-block , block را بررسی خواهیم کرد تا در هنگام استایل نویسی ، بسیار راحت تر و روان تر عمل کنید .

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

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

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

پیشنهادی : دوره آموزش Css ، نابغه Css

اگر وب سایت ها تنها با زبان اچ تی ام ال طراحی شوند ، هرگز به این زیبایی نخواهند بود چرا که زبان اچ تی ام ال سراسر پوشیده از تگ و متن است و هیچ رنگ و لعابی را نمیتوان توسط آن به سایت القا کرد . بنابراین پس از اینکه نشانه گذاری های لازم در سایت توسط اچ تی ام ال انجام شد ، توسط زبان دیگری به نام 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-block
display inline-block
display inline
display inline

اما خوشبختانه میتوان در سی اس اس ، هر خاصیتی را تغییر داد ، یعنی میتوان خاصیت 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 است .

امید قدیمی

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

نقشه راه فرانت

اگر قصد دارید تا یک طراح ماهر باشید ، ما درست ترین مسیر را برای شما فراهم کردیم و فقط کافیست همراه ما باشید

شاید این مطالب نیز برای شما جالب باشد

تفاوت طراح وب با برنامه نویس وب تفاوت طراح وب با برنامه نویس وب چیست ؟ به چه کسی طراح وب گفته می شود و به چه کسی برامه نویس وب ؟ معمولا طراحی سایت هم اکنون یک واژه کلی شده است ، و فرقی بین طراحی سایت با برنامه نویس قائل نمی شوند اما […]

0 811

بهترین ادیتور های طراحی سایت بهترین ادیتور های طراحی سایت ؛ یکی از مهمترین ابزار طراحان و برنامه نویسان دنیای وب محیط هایی برای نوشتن کد هستند و بدون این ابزار ها توسعه برنامه ها بسیار سخت و طاقت فرسا میباشد شاید هم غیرممکن .! امروزه در دنیای کد نویسی دو نوع نرم افزار عمده […]

2 811
دیدگاه ها و نظرات
توجه کامنت های انگلیسی تایید نخواهند شد در صورت داشتن مشکل ، قبل از ارسال دیدگاه نظرات سایر دوستان را نیز مطالعه فرمائید برای مشاهده پاسخ دیدگاه ها بر روی علامت " " کلیک کنید
اشتراک دیدگاه
captcha
تکمیل تمامی فیلد ها الزامی است
آموزش های رایگان بیشتر در آپارات و یوتیوب سئو نود