آموزش display در CSS؛ block، inline و inline-block | درس 27 + پروژه درس

درس 27 از دوره آموزش HTML و CSS ارومیا دیزاین

برای چند لینک، عرض و ارتفاع می نویسید، اما اندازه آن ها تغییر نمی کند. در جای دیگر یک عنصر کوچک، تمام سطر را اشغال کرده است. پاسخ این رفتارها را باید در ویژگی display پیدا کنید. در این درس با یک محتوای یکسان، سه رفتار متفاوت را آزمایش می کنیم: بلوکی، درون خطی و درون خطی با جعبه مستقل. در پایان، یک ردیف لینک قابل کلیک می سازید و می توانید علت چیدمان هر نمونه را توضیح دهید.

فایل تمرین و پاسخ: دانلود پروژه درس 27 (ZIP)؛ شامل HTML، فایل CSS، پاسخ تمرین و راهنمای اجرا. پس از استخراج، فایل index.html را باز کنید؛ نصب ابزار یا اتصال اینترنت لازم نیست.

پیش نیاز این درس، مدل جعبه و تفاوت margin، padding و border است. اگر نحوه اتصال فایل استایل را فراموش کرده اید، آموزش اتصال CSS به HTML را مرور کنید.

ویژگی display دقیقاً چه چیزی را تغییر می دهد؟

HTML وظیفه و معنای محتوا را مشخص می کند؛ CSS روش نمایش آن را تنظیم می کند. ویژگی نمایش تعیین می کند جعبه عنصر چگونه در چیدمان حضور داشته باشد. در این درس، نمونه ها در جریان عادی صفحه هستند؛ یعنی هنوز از موقعیت دهی، Flexbox یا Grid استفاده نمی کنیم. قاعده های این درس را در همین شرایط بررسی کنید.

مرورگر برای بسیاری از عناصر، نمایش پیش فرض دارد. پاراگراف معمولاً بلوکی است و لینک متنی معمولاً درون خطی. این پیش فرض ها قابل تغییرند. با تبدیل یک لینک به بلوک، لینک همچنان یک پیوند است؛ با تبدیل یک پاراگراف به درون خطی، نقش معنایی پاراگراف عوض نمی شود. انتخاب تگ مناسب را فدای ظاهر نکنید.

.service-link {
  display: block;
}

حالت block؛ شروع از یک سطر تازه

عنصر بلوکی در جریان عادی، قبل و بعد از خود شکست سطر ایجاد می کند. وقتی عرض آن خودکار باشد، معمولاً فضای افقی در دسترس والد را پر می کند. اگر عرض مشخصی بدهید، جعبه باریک تر می شود، ولی عنصر بعدی همچنان روی سطر تازه قرار می گیرد. بنابراین «شروع از سطر تازه» و «پر کردن تمام عرض» دو ویژگی یکسان نیستند.

.service-link {
  display: block;
  width: 160px;
  padding: 12px;
  margin: 8px 0;
  border: 2px solid #0284c7;
  box-sizing: border-box;
}

در این مثال، عرض بیرونی هر لینک با احتساب کادر و فاصله داخلی، 160px است؛ فاصله بیرونی جدا حساب می شود. حتی اگر والد جا داشته باشد، لینک دوم کنار اول قرار نمی گیرد. اکنون خط width: 160px; را حذف کنید و تفاوت عرض خودکار را ببینید. مفهوم عرض را می توانید با واحدهای px، درصد، em و rem دقیق تر دنبال کنید.

حالت inline؛ بخشی از جریان متن

عنصر درون خطی به تنهایی سطر تازه ایجاد نمی کند و همراه متن جلو می رود. اگر جا تمام شود، متن می تواند روی چند سطر ادامه پیدا کند. لینک متنی و span نمونه های رایج هستند. برای این عناصر درون خطیِ غیرجایگزین شونده، تعیین عرض و ارتفاع مثل یک بلوک عمل نمی کند.

<p>برای شروع، <a class="text-link" href="#lesson">این درس</a> را بخوانید.</p>

.text-link {
  display: inline;
  width: 160px;
  height: 56px;
  color: #075985;
  background: #e0f2fe;
}

عرض و ارتفاع نوشته شده، لینک متنی بالا را به یک جعبه با این اندازه تبدیل نمی کنند. رنگ و پس زمینه اعمال می شوند، چون رفتار آن ها با عرض و ارتفاع متفاوت است. این قاعده را به همه عناصر تعمیم ندهید: تصویر img یک عنصر جایگزین شونده است و می تواند با وجود درون خطی بودن، عرض و ارتفاع بگیرد.

فاصله افقی روی لینک درون خطی دیده می شود؛ اما فاصله داخلی و کادر عمودی، الزاماً ارتفاع سطرها را به همان نسبت بیشتر نمی کنند و ممکن است با سطرهای مجاور هم پوشانی ظاهری پیدا کنند. برای ساخت لینک شبیه دکمه، حالت بعدی معمولاً مناسب تر است. برای فاصله متن چندخطی هم باید ارتفاع خط را درست تنظیم کنید.

حالت inline-block؛ کنار هم با اندازه مشخص

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

.service-link {
  display: inline-block;
  width: 160px;
  max-width: 100%;
  min-height: 56px;
  padding: 6px 12px;
  margin: 4px;
  box-sizing: border-box;
  vertical-align: top;
}

از ارتفاع حداقلی استفاده کرده ایم تا متن طولانی بتواند ارتفاع جعبه را افزایش دهد. max-width: 100% نیز عرض را به عرض والد محدود می کند. حاشیه های بیرونی همچنان به فضای اشغال شده اضافه می شوند؛ برای والد بسیار باریک، آن ها را هم بررسی کنید. در پروژه دانلودی، والد فاصله مناسب دارد و با کوچک کردن پنجره، لینک ها به سطر بعد منتقل می شوند.

جدول مقایسه برای انتخاب سریع

دو نکته مهم: فاصله بین جعبه ها و تراز عمودی

اگر دو عنصر درون خطی با فاصله یا خط تازه در HTML از هم جدا باشند، مرورگر معمولاً آن فاصله را مانند فاصله میان واژه ها نمایش می دهد. پس فاصله میان دو جعبه فقط از margin نمی آید. اندازه این فاصله به فونت و فاصله متن هم وابسته است؛ آن را یک مقدار پیکسلی ثابت فرض نکنید.

<a class="service-link" href="#web">طراحی سایت</a>
<a class="service-link" href="#seo">بهینه سازی سایت</a>

پیش فرض تراز جعبه های درون خطی معمولاً نسبت به خط مبنای متن است. برای جعبه هایی با ارتفاع مختلف، vertical-align: top بالای آن ها را در سطر هم تراز می کند. این ویژگی برای بلوک های معمولی روش تراز کردن نیست. در درس های چیدمان جدید، کنترل فاصله و تراز را با ابزارهای مناسب آن ها بررسی خواهیم کرد؛ فعلاً دلیل این دو رفتار را بشناسید.

display: none چه تفاوتی با visibility: hidden دارد؟

با display: none جعبه عنصر و فرزندان آن از چیدمان حذف می شود؛ فضای اشغال شده آن هم باقی نمی ماند. عنصر هنوز در سند HTML هست. با visibility: hidden خود عنصر دیده نمی شود، ولی جای جعبه آن معمولاً حفظ می شود. هر دو روش معمولاً محتوا را از درخت دسترس پذیری خارج می کنند؛ بنابراین برای توضیح ضروری یا برچسبی که باید توسط صفحه خوان خوانده شود، این روش ها انتخاب مناسبی نیستند.

.removed {
  display: none;
}

.invisible {
  visibility: hidden;
}

در پروژه، فقط یک پیام آزمایشی با display: none مخفی شده است. در ابزار توسعه، این قانون را غیرفعال کنید تا پیام ظاهر شود و به جریان صفحه برگردد. برای مخفی کردن یک پنل تعاملی، وضعیت کنترل و دسترس پذیری آن هم باید هماهنگ باشد؛ این درس فقط رفتار جعبه را بررسی می کند.

پروژه عملی: یک محتوا در سه حالت

فایل ZIP را استخراج کنید. index.html ساختار صفحه را دارد؛ style.css سه نمونه آماده و بخش تمرین را استایل می دهد؛ solution.css پاسخ تمرین است و README.txt مراحل اجرا را توضیح می دهد. لینک های نمونه مقصد واقعی در همین صفحه دارند تا با کلیک، رفتار طبیعی یک پیوند را هم ببینید.

در هر سه نمونه، کلاس مشترک item ظاهر و اندازه درخواستی را تعریف می کند. فقط کلاس والد، نوع نمایش را تغییر می دهد. برای درک این الگو، انتخابگرهای CSS و کلاس ها را مرور کنید. برای تفاوت رنگ کادر و پس زمینه نیز درس رنگ و پس زمینه مفید است.

.as-block .item { display: block; }
.as-inline .item { display: inline; }
.as-inline-block .item {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
}

این مراحل را انجام دهید: ابتدا با عرض ثابت، سه نمونه را مقایسه کنید. سپس عرض و ارتفاع کلاس مشترک را تغییر دهید و ببینید چرا لینک متنی درون خطی از آن ها تبعیت نمی کند. بعد فقط عرض ثابت را حذف کنید و عرض خودکار بلوک را ببینید. تغییر را برگردانید و پنجره را باریک کنید تا شکستن ردیف جعبه های مستقل را مشاهده کنید.

تمرین مستقل و روش بررسی پاسخ

در بخش «تمرین شما»، لینک ها هنوز ظاهر ساده دارند. فقط لینک های داخل .answer را هدف بگیرید. آن ها را کنار هم قرار دهید، عرض 160px و حداقل ارتفاع 56px بدهید، کادر 2px، فاصله داخلی 6px 12px و فاصله بیرونی 4px تنظیم کنید. نمونه های آماده بالای صفحه نباید تغییر کنند.

برای مقایسه با پاسخ، این خط را بعد از لینک style.css در بخش head اضافه کنید. پاسخ نباید پیش از تلاش خودتان فعال باشد؛ در فایل پروژه هم از ابتدا فعال نشده است.

<link rel="stylesheet" href="solution.css">

ترتیب فایل ها مهم است. اگر پاسخ اعمال نشد، آدرس فایل و ذخیره شدن تغییرات را بررسی کنید و در بخش Styles مرورگر ببینید کدام قانون فعال است. آبشار و اولویت قوانین CSS به شما کمک می کند علت غلبه یک قانون را پیدا کنید. از افزودن بی دلیل !important خودداری کنید.

دانلود دوباره: فایل پروژه و پاسخ تمرین درس 27. برای توسعه تمرین، نام یکی از لینک ها را طولانی تر کنید و دلیل استفاده از ارتفاع حداقلی را ببینید؛ سپس لینک چهارم را اضافه کنید و چیدمان را در پنجره باریک بررسی کنید.

اشتباه های رایج و رفع آن ها

• عرض لینک تغییر نمی کند: ابتدا مقدار display را ببینید؛ لینک متنی inline عرض تعیین شده را نمی پذیرد.
• یک بلوک باریک است اما عنصر بعدی کنار آن نمی آید: باریک شدن عرض، شکست سطر بلوکی را حذف نمی کند.
• دو جعبه فاصله دارند، با اینکه margin صفر است: فاصله های موجود در HTML را هم بررسی کنید.
• جعبه های کنار هم از بالا تراز نیستند: تراز عمودی را بررسی کنید؛ برای نمونه های این درس از vertical-align: top استفاده کنید.
• محتوای بلند از جعبه بیرون می زند: ارتفاع ثابت را بررسی کنید؛ اغلب ارتفاع خودکار یا حداقل ارتفاع مناسب تر است.
• برای ظاهر دکمه از تگ اشتباه استفاده شده: برای رفتن به یک مقصد، لینک و برای انجام عمل، دکمه مناسب است؛ display نقش تگ را عوض نمی کند.

خودآزمایی پیش از درس بعد

آیا می توانید توضیح دهید چرا یک لینک inline اندازه تعیین شده را نمی گیرد، ولی همان لینک با inline-block می گیرد؟ آیا می دانید چرا block با عرض ثابت باز هم سطر تازه ایجاد می کند؟ اگر عنصر را با display: none مخفی کنید، چه اتفاقی برای فضای آن می افتد؟ پاسخ درست باید به رفتار جعبه اشاره کند، نه صرفاً رنگ و ظاهر آن.

در درس 28 سراغ تایپوگرافی در CSS می رویم: فونت، اندازه نوشته، ارتفاع خط و تنظیم خوانایی متن. تمرین این درس را نگه دارید تا در مرحله بعد، خوانایی لینک ها و متن صفحه را بهتر کنید.

برای مشاهده تعریف رسمی و گزینه های بیشتر: مرجع ویژگی display در MDN. در این درس فقط حالت های پایه در جریان عادی را تمرین کردیم.