فاصله گذاری را می توان با استفاده از HTML و CSS با 3 روش زیر اضافه کرد:
روش 1: استفاده از کاراکترهای ویژه تعیین شده برای فضاهای مختلف
کاراکتر برای نشان دادن یک فضای بدون شکست که یک فضای ثابت است استفاده می شود. ممکن است در کد، به عنوان دو برابر فضای معمولی درک شود. از آن برای ایجاد فضایی در یک خط استفاده می شود که با word wrap شکسته نمی شود.
کاراکتر   برای نشان دادن فضای “en” استفاده می شود که به معنای اندازه نیم نقطه فونت فعلی است. ممکن است به عنوان دو برابر فضای معمولی درک شود.
کاراکتر   برای نشان دادن فضای “em” استفاده می شود که به معنای برابر با اندازه نقطه فونت فعلی است. ممکن است چهار برابر فضای معمولی در نظر گرفته شود.
Syntax:
فاصله عادی:
دو فاصله:  
چهار فاصله:  
مثال:
<!DOCTYPE html>
<html>
<head>
<title>
چگونه با استفاده از HTML/CSS فاصله خالی یا Tab در متن وارد کنیم؟
</title>
</head>
<body style="direction: rtl; text-align: right">
<h1 style="color: green">بکندباز</h1>
<b>چگونه با استفاده از HTML/CSS فاصله خالی یا Tab در متن وارد کنیم؟</b>
<p>این یک فاصله معمولی است</p>
<p>این یک فاصله دو برابری است.</p>
<p>این یک فاصله چهار برابری است</p>
</body>
</html>در کد بالا، فضای معمولی و کد دو فاصله و چهار فاصله قابل مشاهده نیست، بنابراین در اینجا به نظر می رسد
خروجی:
روش 2: استفاده از تگ های <pre>
با استفاده از تگ پیش ساختارمند (با استفاده از تگ های <pre>) می توانیم به تعداد دلخواه در متن خود فاصله اضافه کنیم و همه فاصله ها تفسیر می شوند.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>
چگونه با استفاده از HTML/CSS فاصله خالی یا Tab در متن وارد کنیم؟
</title>
</head>
<body style="direction: rtl; text-align: right">
<h1 style="color: green">بکندباز</h1>
<b>چگونه با استفاده از HTML/CSS فاصله خالی یا Tab در متن وارد کنیم؟</b>
<pre>این یک فاصله معمولی است</pre>
<pre>این یک فاصله دو برابری است.</pre>
<pre>این یک فاصله چهار برابری است</pre>
</body>
</html>خروجی:
روش 3: ایجاد یک کلاس جدید برای فاصله گذاری با استفاده از CSS
یک کلاس جدید را می توان ایجاد کرد که با استفاده از ویژگی margin-left مقدار مشخصی فاصله ایجاد می کند. مقدار فضا را می توان با تعداد پیکسل های مشخص شده در این ویژگی نشان داد.
ویژگی display نیز روی ‘inline-block’ تنظیم شده است تا هیچ خط شکنی بعد از عنصر اضافه نشود. این کار اجازه می دهد تا فضای خالی در کنار متن و سایر عناصر قرار گیرد.
نحو:
.tab {
display: inline-block;
margin-left: 40px;
}مثال:
<!DOCTYPE html>
<html>
<head>
<title>
چگونه با استفاده از HTML/CSS فاصله خالی یا Tab در متن وارد کنیم؟
</title>
<style>
.tab {
display: inline-block;
margin-left: 40px;
}
</style>
</head>
<body style="direction: rtl; text-align: right">
<h1 style="color: green">بکندباز</h1>
<b>چگونه با استفاده از HTML/CSS فاصله خالی یا Tab در متن وارد کنیم؟</b>
<p>این یک فاصله Tab در <span class="tab"></span>متن است</p>
</body>
</html>
خروجی:
دیدگاه‌ها