زنگ CSS: جلسه چهاردهم - دستور display و مقادیر آن

گاهی پیش می‌آید که قصد قرار دادن دو المان از نوع بلاک (اگر کلمه بلاک یادتان نمی‌آید در مطلب یک یادآوری از این موضوع داشته‌ایم) در یک ردیف را داشته باشیم. این جور مواقع کار کمی مشکل می‌شود؛ ولی ما در این بخش با کمک دستور display به سادگی هر چه تمام تر این کار را انجام خواهیم داد. اگر می‌خواهید مثل ما این کار رابه سادگی آب‌ خوردن انجام دهید، با ما در ادامه مطلب همراه شوید. 

دستور inline block چه کاربردی دارد؟

همانطور که می‌دانید المان‌های اچ‌تی‌ال غالبا به صورت بلاک و خطی بوده و هر المان یک سطر کامل را اشغال می‌کند. کلمه بلاک در واقع برای المان‌هایی مثل

یا اطلاق می‌شود. این المان‌ها زمانی که نوشته می‌شوند هیچ چیز دیگری را در کنار خود جای نمی‌دهند. اگر خاطرتان باشد چند جلسه پیش ما با استفاده از شناوری float المان‌ها توانستیم که این المان‌ها را در کنار هم قرار دهیم. اما امروز می‌خواهیم یک راه حل دیگر برای کنار هم چیدن المان‌های صفحه به شما بگوییم و آن هم چیزی نیست به جز استفاده از display و مقدار inline-block!  با کمک این دستور تمامی المان‌هایی که دارای این ویژگی باشند، در یک خط و در کنار یکدیگر قرار می‌گیرند.

نام: display

این دستور چه کاری انجام می‌دهد؟‌ نحوه‌ی نمایش المان‌های شما رامشخص می‌کند. ما در این دوره فقط با مقدار  inline-block کار داریم که المان‌های اچ تی ام ال در یک خط و در کنار هم می‌آورد. 

چه چیزهایی را در مقابلش بنویسیم؟ در این آموزش فقط با مقادیر خطی کردن یعنی inline-block کار داریم. 

نمونه‌ی نوشتن این دستور: display: inline-block

HTML

جعبه‌های شناور

ویدیو مرتبط :
آموزش html و css مقدماتی yadvid.ir - جلسه چهاردهم