فاصله گذاری
پنجشنبه, ۱۴ ارديبهشت ۱۳۹۶، ۰۸:۴۰ ق.ظ
ویژگی line-height
ویژگی line-height مقدار خود را از عنصر والدش به ارث می برد، بنابراین بهتر است که مقدار آن را با استفاده از یک عدد بدون بعد تعیین کنیم.
مقدار دهی ویژگی line-height با یک واحد اندازه گیری طول یا درصد می تواند برای عناصر فرزند مربوط به عنصر اصلی که از فونت هایی با اندازه متفاوت استفاده می کنند نتایج غیرقابل پیش بینی به وجود آورد. به خاطر اینکه در این صورت دیگر فاصله بین خطوط ثابت است و دیگر وابسته به اندازه فونت عنصر فرزند نیست.
ویژگی های word-spacing و letter-spacing
در مثال زیر مشخص می کنیم که بین حروف به اندازه 3 پیکسل فاصله باشد و بین کلمات به اندازه 5 پیکسل فاصله وجود داشته باشد. این قانون برای متن داخل پاراگراف ها نوشته شده است:
در حالت معمول چند کاراکتر فضای خالی در داخل یک فایل اچ تی ام ال به یک کاراکتر کاهش پیدا می کنند، و اگر لازم باشد عرض بلوکی که متن در آن قرار دارد را اشغال می کند.
هر دو ویژگی pre-wrap و pre-line باعث می شوند که متن به صورت عادی بسته بندی شود، با استفاده از pre-wrap ترتیب فضاهای خالی حفظ می شود و با استفاده از pre-line این فضاهای خالی کاهش پیدا می کنند (یکی می شوند). تفاوت بین pre-line و normal در این است که مقدار pre-lineکاراکترهای خط جدید را حفظ می کند. توجه داشته باشید که پشتیبانی از دو مقدار اخیر از نسخه 8 به بعد IE اضافه شده است.
از ویژگی line-height برای مشخص کردن فاصله بین خطوط استفاده می کنیم. مقدار پیش فرض برای این ویژگی normal است که معمولا به اندازه 120% اندازه فونت در نظرگرفته می شود. همچنین می توانیم فاصله بین خطوط را بر اساس واحد اندازه گیری طول، درصدی از اندازه فونت فعلی، یا یک عدد بدون بعد که در اندازه فونت فعلی ضرب می شود مشخص کنیم.
line-height :inherit | normal | <length> | <percentage> | <number>
مقدار دهی ویژگی line-height با یک واحد اندازه گیری طول یا درصد می تواند برای عناصر فرزند مربوط به عنصر اصلی که از فونت هایی با اندازه متفاوت استفاده می کنند نتایج غیرقابل پیش بینی به وجود آورد. به خاطر اینکه در این صورت دیگر فاصله بین خطوط ثابت است و دیگر وابسته به اندازه فونت عنصر فرزند نیست.
/* در قطعه کد زیر، فاصله بین خطوط به اندازه 1.5 برابر اندازه فونت است */ line-height :1.5;ویژگی line-height بر روی عناصر جایگزین شده خطی (inline replaced elements) مانند <img> تاثیری ندارد. هنگامی که در مورد عناصر جایگزین نشده خطی استفاده می شوند، فاصله بین خطوط همانطور که مورد انتظار است تنظیم می شود. در مورد عناصری که به صورت بلوک هستند ویژگی line-height بر اساس کمترین فاصله بین خطوط داخل باکس تنظیم می شود.
ویژگی های word-spacing و letter-spacing
با استفاده از ویژگی word-spacing فاصله بین کلمات را تنظیم می کنیم، و با استفاده از letter-spacing فاصله بین کاراکترها (حروف) را مشخص می کنیم. برای هر دوی این ویژگی ها می توان از مقادیر منفی استفاده کرد.
word-spacing :inherit | normal | <length>
letter-spacing : inherit | normal | <length>
در مثال زیر مشخص می کنیم که بین حروف به اندازه 3 پیکسل فاصله باشد و بین کلمات به اندازه 5 پیکسل فاصله وجود داشته باشد. این قانون برای متن داخل پاراگراف ها نوشته شده است:
p{
letter-spacing : 3px;
word-spacing : 5px;
}
ویژگی white-space ویژگی white-space مشخص می کند که کاراکترهای فاصله در داخل یک عنصر بلوکی به چه صورت مورد پردازش قرار بگیرند.
white-space (block) : inherit | normal | nowrap | pre | pre-wrap | pre-line
در حالت معمول چند کاراکتر فضای خالی در داخل یک فایل اچ تی ام ال به یک کاراکتر کاهش پیدا می کنند، و اگر لازم باشد عرض بلوکی که متن در آن قرار دارد را اشغال می کند.
/* Wrap text and collapse newline, spaces and tabs */
p { white-space : normal; }
با تنظیم کردن مقدار white-space به nowrap باعث می شویم متن به هیچ تگی غیر از تگ <br> واکنش نشان ندهد. البته مقدار pre(preformatted) هم باعث می شود که متن بسته بندی (wrap) نشود، اما این ویژگی از تمام کاراکترهای فضای خالی نیز جلوگیری می کند. این مقدار مثل عنصر <pre> در اچ تی ام ال عمل می کند. هر دو ویژگی pre-wrap و pre-line باعث می شوند که متن به صورت عادی بسته بندی شود، با استفاده از pre-wrap ترتیب فضاهای خالی حفظ می شود و با استفاده از pre-line این فضاهای خالی کاهش پیدا می کنند (یکی می شوند). تفاوت بین pre-line و normal در این است که مقدار pre-lineکاراکترهای خط جدید را حفظ می کند. توجه داشته باشید که پشتیبانی از دو مقدار اخیر از نسخه 8 به بعد IE اضافه شده است.
