معرفی margin-block-start در CSS
یکی از ویژگی‌های کاربردی CSS که می‌تواند در طراحی وب به کار بیاید، margin-block-start است. این ویژگی جزء ویژگی‌های margin در CSS به حساب می‌آید و به شما این امکان را می‌دهد که فاصله‌ای که از بالای یک عنصر گرفته می‌شود را مشخص کنید. به عبارت دیگر، margin-block-start برای تنظیم حاشیه از ابتدای بلاک استفاده می‌شود. این مورد در زبان‌های راست به چپ (مثل فارسی) و چپ به راست (مثل انگلیسی) کاربرد دارد.
یکی از مزیت‌های استفاده از margin-block-start این است که با توجه به ویژگی writing-mode محتوا، خود به خود تنظیم می‌شود. مثلاً اگر شما یک صفحه به زبان فارسی داشته باشید که در آن از راست به چپ نوشته شده، این ویژگی به طور خودکار فاصله را از سمت راست تنظیم می‌کند. برای مثال، می‌توانید از این خاصیت برای ایجاد فاصله مناسب بین پاراگراف‌ها استفاده کنید، بدون آنکه نیازی به نوشتن کد متفاوت برای زبان‌های مختلف داشته باشید.
بیایید با یک مثال ساده نگاه کنیم. فرض کنیم ما یک تگ <div> داریم که شامل چند پاراگراف است و می‌خواهیم فاصله‌ای از بالای آن‌ها ایجاد کنیم. با استفاده از margin-block-start می‌توانیم به راحتی این کار را انجام دهیم. مثال زیر به شما نشان می‌دهد که چگونه می‌توانید این ویژگی را در CSS به کار ببرید.
مثال کد
.example {
margin-block-start: 20px;
}
در این مثال، ما یک کلاس به نام example تعریف کرده‌ایم و مقدار margin-block-start را در آن 20 پیکسل تنظیم کرده‌ایم. حالا هر عنصری که این کلاس را داشته باشد، 20 پیکسل از ابتدای بلاک خود فاصله خواهد داشت.
توضیحات کد
بیایید نگاهی به کد بالا بیندازیم:
.exampleدر این خط، کلاس example تعریف شده است که شما می‌توانید به عناصر HTML خود اعمال کنید.
{این خط نشان‌دهنده شروع بخش تنظیمات CSS برای کلاس است.
margin-block-start: 20px;در این خط، فاصله بالایی از ابتدا برای عناصر این کلاس تنظیم شده است. مقدار 20 پیکسل باعث می‌شود که عنصر مورد نظر 20 پیکسل فاصله از بالای خود داشته باشد.
}این خط نشان‌دهنده پایان تنظیمات CSS برای کلاس است.