مقدمه
وقتی صحبت از استایل‌دهی صفحات وب به میان می‌آید، CSS یکی از ابزارهای اصلی است که برنامه‌نویسان برای دستیابی به طراحی‌های پیچیده و حرفه‌ای از آن استفاده می‌کنند. شاید برای شما هم پیش آمده باشد که بخواهید در سند HTML خود، فضایی را خالی کنید، مشابه چیزی که \phantom در TeX انجام می‌دهد. در اینجا به شما توضیح می‌دهیم که چگونه می‌توانید با استفاده از CSS به این هدف برسید و فضای خالی ایجاد کنید.
کلاس‌های CSS برای ایجاد فضای خالی می‌توانند به عنوان یکی از تکنیک‌های پیشرفته مورد استفاده قرار گیرند. به این ترتیب شما قادر خواهید بود با تعیین میزان دقیق فضای خالی که نیاز دارید، محل مورد نظر را در سند خود خالی نگه دارید. در CSS، ما معمولاً به استفاده از ویژگی‌های margin یا padding، و یا حتی با استفاده از ایجاد عناصر غیرقابل رؤیت با visibility: hidden می‌توانیم این فضاها را ایجاد کنیم.
روش‌های ایجاد فضای خالی
برای دستیابی به این ویژگی، می‌توانیم از تکنیک‌های مختلفی استفاده کنیم. در اینجا چند روش معمول را بیان می‌کنیم. با استفاده از این روش‌ها، شما می‌توانید فضای خالی را بر اساس نیاز طراحی خود ایجاد کنید. ما به بررسی نمونه‌ای از هر کدام از این روش‌ها خواهیم پرداخت و شما را با کاربرد دقیق آنها آشنا خواهیم کرد.
در ابتدا لازم است به ذکر این نکته بپردازم که هر کدام از این روش‌ها مزایای خاصی دارند و بهترین شیوه استفاده از آنها به نیازهای خاص پروژه بستگی دارد. از این رو، آشنایی با هر یک از این تکنیک‌ها می‌تواند کمک شایانی به شما در امر طراحی رابط کاربری وب کند.
<style>
.phantom-space {
display: inline-block;
width: 50px; /* عرض فضای خالی */
height: 0px; /* ارتقاع صفر برای اینکه فضا تنها به صورت افقی باشد */
}
</style>
<html>
<body>
این یک متن است<span class="phantom-space"></span>و این متن دیگری است.
</body>
</html>
توضیحات کد
<style>: این تگ برای تعریف استایل‌های داخلی در صفحه به کار می‌رود.
.phantom-space: این یک کلاس CSS است که فضای خالی ایجاد می‌کند.
display: inline-block;: با استفاده از این ویژگی، می‌توانیم یک عنصر خطی ایجاد کنیم که قابل تغییر سایز باشد.
width: 50px;: عرض فضای خالی که می‌خواهیم ایجاد کنیم. می‌توانید بر اساس نیاز خود این مقدار را تغییر دهید.
height: 0px;: ارتقاع صفر به این معنا است که این فضا تنها به صورت افقی کاربرد دارد و در ارتفاع تغییری ایجاد نمی‌کند.
<html>: تگ پایه‌ای برای تعریف ساختار اصلی یک سند HTML است.
<body>: بخش اصلی محتوا در یک سند HTML که تمامی عناصر نمایشی در آن قرار می‌گیرند.
متن نمونه: این متن نشان‌دهنده محل قرارگیری فضای خالی بین دو جمله است.