آموزش کار با خاصیت inline-block؛ یکی از بخش های مهم در Display! در زبان برنامه نویسی CSS یک ویژگی داریم به اسم Display که با استفاده از این ویژگی می توانیم نحوه نمایش یک عنصر را به صورت بلاکی و یا اینلاینی مشخص کنیم.
در حال حاضر، زبان های برنامه نویسی زیادی ایجاد شده اند که شما می توانید با استفاده از این زبان ها سایت های مختلفی را طراحی و راه اندازی کنید. یکی از این زبان ها، CSS است که شامل ویژگی ها و قابلیت های زیادی است. Display یکی از این قابلیت هاست که خصوصیات زیادی دارد. اگر قصد طراحی سایت در ارومیه را دارید، توصیه می کنیم تا با این بخش آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد خصوصیت inline-block برای شما ارائه کنیم و نحوه کار با این بخش را به شما یاد دهیم.
خاصیت inline-block چیست؟
شاید این سوال برای شما نیز پیش آمده باشد که خاصیت inline-block چیست؟ ما می توانیم در پاسخ به این سوال بگوییم که inline-block یکی از قابلیت های مهم در بخش Display زبان برنامه نویسی CSS است که شما می توانید از این قابلیت استفاده کنید. المان ها در مرورگر به صورت پیش فرض یکی از دو حالت block یا inline برای نمایش دارند. اگر می خواهید نحوه کار با بخش inline-block را یاد بگیرید، توصیه می کنیم تا در دوره آموزش CSS شرکت کنید.
جالب است بدانید، خاصیت inline-block کاملا شبیه به ویژگی inline است، با این تفاوت که تگ دارای این ویژگی مانند تگ دارای ویژگی block می تواند مقادیر عرضه و ارتفاع بگیرد. همچنین مارجین و Padding تگ دارای ویژگی display inline-block روی روی عناصر مجاور آن در هر دو راستای عمودی و افقی تاثیر گذار خواهد بود. توسعه دهندگان از این ویژگی برای توسعه سایت های خودشان استفاده می کنند.
چگونه از خاصیت inline-block استفاده کنیم؟
توجه داشته باشید که در زبان برنامه نویسی CSS، به طور کلی برای تمامی عناصر دو نوع چارچوب اصلی وجود دارد که یکی از آنها inline و دیگری block است و پس از خاصیت position در css یکی از مهمترین بخش هاست که متناسب با این دو نوع چارچوب ما تگ های HTML را به دو دسته اینلاین و بلاکی تقسیم بندی می کنیم. متناسب با همین خصوصیت ها از ویژگی display به معنی نمایش، برای تعیین و تغییر چارچوب نمایش یک عنصر استفاده می شود.
اگر در وبسایت قرار بود برای مثال تگ یا تگ هایی مانند تگ div، تگ p و امثال آن که تگ هایی با display block هستند را تبدیل به تگ های اینلاین کنیم، کافی است در کدهای CSS خود مقدار آن تگ را display inline قرار دهیم. شما می توانید با استفاده از تگ inline-block ظاهر سایت های خودتان را بهینه سازی کنید.
استفاده از inline-Block برای ساخت لینک ناوبری
توجه داشته باشید که کاربرد رایج برای inline-Block، نشان دادن آیتم های فهرست به شکل افقی به جای عمودی است. مثال زیر لینک های ناوبری افقی درست می کند:
خروجی مثال بالا به شکل زیر خواهد بود:
جمع بندی و نتیجه:
ما خواستیم در این مطلب، توضیحاتی در مورد خصوصیت inline-block برای شما ارائه کنیم و نحوه کار با این بخش را به شما یاد دهیم. همانطور که گفته شد، خاصیت inline-block یکی از قابلیت ها در زبان CSS است که شما می توانید از این خاصیت استفاده کنید. اگر می خواهید نحوه کار با این قابلیت را یاد بگیرید، توصیه می کنیم تا در دوره آموزش CSS شرکت کنید.
نظرات: