وقت بخیر 🌸
در این پست قصد داریم با یک ویژگی جدید اشنا بشیم ☘️


☘️line-height
با استفاده از این ویژگی میتوانیم فاصله عمودی بین خطوط یک متن رو کنترل کنیم 🌷

مقادیری که این ویژگی میپذیرد :

em , rem , px , % ...
اعداد بدون واحد
inherit


فرض کنید ساختار زیر رو داریم :

HTML:

<div>
frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding
</div>


RESULT:

frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding frozen coding

همانطور که میبینید خروجی کد ما طبیعتا یک متنی هست که خودمون در بخش html نوشتیم و فاصله بین خطوط بر اساس قوانین عادی توسط مرورگر تنظیم شده 🌷


حالا اگه این ویژگی رو برای این متن اعمال کنیم :

CSS:

div{
line-height : 3em;
}


RESULT:

frozen coding frozen coding

frozen coding frozen coding

frozen coding frozen coding

frozen coding frozen coding

frozen coding frozen coding

در خروجی جدید فاصله بین خطوط بر اساس ویژگی line-height و مقدار 3em تنظیم شده 🌷


نکته 🔍 : مقادیری همچن em , rem , px , % برای این ویژگی توصیه نمیشوند ، بلکه بهترین حالت استفاده از مقادیر بدون واحد هست 🌱

دلیل :

فرض کنید یک تگ div دارید و یک متنی رو داخلش قرار دادید و همچنین یک تگ span نیز داخل تگ div دارید و داخل تگ span هم یک متنی رو نوشته اید ، حالا به این نکته توجه کنید :

نکته 🔍 : ویژگی line-height از ویژگی هایی هست که از والد به فرزند به ارث میرسد (راجع به مفهوم و توضیحات ارث بری بعدها صحبت خواهیم کرد) ☘️

حالا با توجه به نکته بالا و توضیحات بالاترش به سخنان بعدی دقت کنید

الان اگر برای تگ div یک سایز متن مشخص کنیم و از ویژگی line-height هم استفاده کنیم یعنی به صورت زیر :

div{
font-size : 16px;
line-height : 18px;
}

و اگر به تگ span استایل های زیر رو اعمال کنم :

span{
font-size : 40px;
}

الان احتمالا خروجی تگ div یک متن معمولی با فاصله خطوط نسبتا خوبی خواهد بود 🌱 اما از انجا که ویژگی line-height از تگ div به تگ span به ارث میرسد ، در واقعا انگار ویژگی line-height با مقدار 18px برای تگ span هم قرار گرفته ، اما از انجایی که تگ span سایز متنش زیادتر هستش در این مثال احتمالا فاصله بین خطوط نسبت به سایز متن کمتر خواهد بود و خطوط بهم برخورد خواهند کرد 🌷


راه حل رفع این مشکل :

1: شما میتوانید برای تگ span یک line-height جداگانه تنظیم کنید و مقدارشو افزایش بدید ☘️

2: راه حل بهتر این مورد هستش ،
شما میتوانید بجای استفاده از واحد ها از مقادیر بدون واحد استفاده کنید مثلا میتونید به تگ div اینجوری مقدار بدید :

div{
line-height : 1;
}

در اینصورت مرورگر فواصل بین خطوط رو بر اساس سایز متن خود عنصر در نظر میگیره یعنی برای div که سایز متنش 16 بود بر اساس اون سایز فاصله رو اعمال میکنه و برای تگ span هم با توجه به سایز 40 فواصل رو در نظر میگیره ☘️



برای درک بهتر این موارد حتما ویدیو مربوطه رو مشاهده کنید 🌷

👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨
#css #css3 #learn_css #line_height

#آموزش #آموزش_css #متن_ها
👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨



شاد و موفق و پیروز باشید 🌸



☘️Join Channel :👇
{
@frozencoding_channe
}