معرفی و مفهوم چیدمان عادی در CSS
وقتی که با CSS و HTML کار می‌کنید، نحوه‌ی چیدمان عناصر در صفحه یکی از مفاهیم اصلی است. در CSS، دو مدل اصلی برای چیدمان عناصر وجود دارد: چیدمان بلاک و چیدمان اینلاین. هرکدام از این مدل‌ها نقش مهمی در نمایش یا نگهداری ساختار صفحه دارند.
عناصر بلاک به طور عمومی به عناصر کلی‌تر مانند <div>، <h1> تا <h6> و <p> اشاره دارد. این عناصر به طور کامل فضای عرض خود را پر می‌کنند و همیشه در خط جدید شروع می‌شوند.
از طرف دیگر، عناصر اینلاین بیشتر به برچسب‌های کوچکتر مثل <span>، <a> و <img> مربوط می‌شوند. این عناصر فقط به اندازه محتوای خود فضا را اشغال می‌کنند و می‌توانند در خطی که سایر عناصر آن هستند، قرار گیرند.
درک تفاوت‌ها و کاربردهای هرکدام از این دو مدل به شما امکان می‌دهد تا در پروژه‌های بزرگتر، ساختار کد تمیز و منظم‌تری ایجاد کنید. انتخاب صحیح بین مدل بلاک و اینلاین می‌تواند تفاوت زیادی در تجربه کاربری و ظاهر وب‌سایت داشته باشد.
نمونه کد و تفاوت‌ها
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال چیدمان بلاک و اینلاین</title>
<style>
div {
border: 1px solid #000;
margin: 10px;
}
span {
color: red;
}
</style>
</head>
<body>
<div>
این یک عنصر بلاک است و فضای کامل را پر می‌کند.
</div>
<p>متن پاراگراف با <span>اینجا</span> یک عنصر اینلاین است.</p>
</body>
</html>
توضیح کد
<div>...</div> یک عنصر بلاک است که کل عرض موجود را پر می‌کند.<span>...</span> یک عنصر اینلاین است و فقط به اندازه محتوای خود فضا می‌گیرد، در این مثال درون یک متن پاراگراف قرار گرفته است که به صورت عادی و بدون شکستن خط باقی می‌ماند.style انتخاب‌های CSS برای استایل‌دهی عناصر بلاک و اینلاین دارد که به خوبی تفاوت بین آن‌ها را نمایش می‌دهد.div در CSS با استفاده از border و margin اصطلاحاً جعبه‌ای از اطراف خود ایجاد کرده تا تفاوت دیداری بیشتری به نمایش بگذارد.span فقط رنگ متن را تغییر داده و درون خط باقی‌مانده که باعث می‌شود در ترکیب با عناصر دیگر به صورت اینلاین احساس شود.