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

در جلسه‌ی چهارم از سری مقالات آموزشی CSS به ارائه‌ی اطلاعاتی درباره‌ی دستور display می‌پردازیم.

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

یا

نام: display

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

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

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

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

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

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

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

.floating-box {    display: inline-block;    width:  150px;     height:  75px;     margin:  10px;     border:  3px solid #8AC007;}

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

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

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

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

همانطور که در مثال بالا مشاهده می‌کنید، بعد از استفاده از دستور inline-block دیویژن‌های ما به صورت شناور در کنار هم و در یک سطر قرار گرفتند. 

تمرین: برای اینکه نشان دهید چقدر با جلسه امروز توانسته‌اید ارتباط برقرار کنید، یک لیست بدون نظم unorderd list ایجاد کنید و  کاری کنید که آیتم‌های لیست به جای اینکه زیر هم قرار بگیرند، در کنار هم قرار بگیرند. 

راهنمایی: اگر نمی‌دانید قضیه از چه قرار است راهنمایی کوچکی می‌کنیم. المان‌ لیست یک المان بلاک است و برای تبدیل یک المان بلاک به المانی که در یک خط قرار بگیرد، از دستور بخصوصی استفاده می‌کردیم. باقی این موضوع را دیگر خودتان می‌دانید!