وقت بخیر 🌸

در این پست قصد داریم با یک ویژگی جدید و پرکاربرد اشنا بشیم 🌷

☘️ text-align
با استفاده از این ویژگی میتوان چیدمان یک عنصر خطی مثل متن و عکس و... رو داخل یک عنصر بلاک‌ رو مشخص کرد 🌷

فرض کنید در html این تگ رو داریم :

<p>frozen coding</p>

و در css :

p{
text-align: center;
}

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

☘️ left
با استفاده از این مقدار میتوان عناصر را چپ چین کرد 🌷

☘️ right
با استفاده از این مقدار میتوان عناصر را راست چین کرد 🌷

☘️ center
با استفاده از این مقدار میتوان عناصر را وسط چین کرد 🌷

☘️ justify
این مقدار باعث میشود تا تمام خطوط بجز خط اخر فضاهای خالی از چپ و راست رو بین محتوای متنی خود توضیع بکنند طوری که محتوای متنی کل خط رو پر بکند 🌷

☘️ start
این مقدار اگر مقدار direction عنصر برابر ltr باشد چپ چین میشود ، اگر rtl باشد ، راست چین میشود 🌷

☘️ end
این مقدار اگر مقدار direction عنصر برابر ltr باشد راست چین میشود ، اگر rtl باشد ، چپ چین میشود 🌷

☘️ inherit
با این مقدار از قبل اشنا هستید ، تنها تفاوتی که دارد فقط در مقادیر end , start ، اگر خود عنصر ویژگی direction داشته باشد ، با توجه به جهت direction خودش مقادیر رو محاسبه میکند 🌷

برای مثال :

.dad{
direction : ltr;
text-align: start;
}
در اینجا محتوای عنصر چپ چین میشود 🌷

.child {
direction : rtl;
text-align : inherit;
}

الان ویژگی text-align از پدرش به ارث میبرد ، اما چون ویژگی direction خود عنصر متفاوت است ، در این مثال عنصر راست چین میشود 🌷

☘️ match-parent

این مقدار دقیقا مثل inherit عمل میکند ، با این تفاوت که ویژگی direction والد رو اولویت قرار میدهد 🌷

☘️ initial
با این مقدار هم که از قبل اشنا هستید 🌷


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


👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨
#css #css3 #learn_css #color #text_align

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



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



☘️Join Channel :👇
{
@frozencoding_channel
}

اینم ویدیو عملی تمرین بالا 🌺🌸



👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨
#css #css3 #learn_css #color #text_align

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

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

☘️ text-decoration
این ویژگی به ما این امکان رو میده که بتونیم زیر یک متن خط بکشیم و یا بالای یک متن خط بکشیم و یا یک متن رو خط خوره بکنیم و یا همه این خطوط رو پاک بکنیم 🌷

این ویژگی مقادیر زیر رو میپذیره 🌷

☘️ overline
با استفاده از این مقدار میتوان بالای یک متن یک خط صاف کشید 🌷

☘️ line-through
با استفاده از این مقدار میتوان روی یک متن خط کشید یا به نوعی متن رو خط خورده نشان داد 🌷

☘️ underline
با استفاده از این مقدار میتوان زیر یک متن یک خط صاف کشید 🌷

☘️ none
با استفاده از این مقدار میشه خطوط کشیده شده را پاک کرد ، مثلا برای لینک ها ، زمانی که از یک تگ a استفاده میکنید ، این تگ a در حالت پیش فرض یک خط زیر متن داخلش رسم میکنه ، که با استفاده از این مقدار میتوانیم این خط رو پاک بکنیم 🌷

☘️ inherit
☘️ initial
این دو مورد رو هم بلدید 🌷

مثال :

<p>frozen coding</p>

p{
text-decoration : underline;
}

خروجی :

frozen coding

🌱🌱🌱🌱🌱🌱🌱🌱🌱🌱🌱🌱🌱

مثال 2:

<p>frozen coding</p>

p{
text-decoration : line-through;
}

خروجی :

frozen coding


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


👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨
#css #css3 #learn_css #color #text_decoration

#آموزش #آموزش_css #متن_ها #زیرخط #خط_خورده
👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨



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



☘️Join Channel :👇
{
@frozencoding_channel
}

اینم ویدیو عملی تمرین بالا 🌺🌸



👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨
#css #css3 #learn_css #color #text_decoration

#آموزش #آموزش_css #متن_ها #زیرخط #خط_خورده
👁‍🗨➖➖➖➖➖➖➖➖➖➖➖👁‍🗨


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

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

☘️text-indent
فرض کنید یک پاراگراف داریم ، حال میخواهیم در اولین خط این پاراگراف یک تورفتگی ایجاد بکنیم 🌷

مثلا این متن رو داریم :

If you don’t design your own life plan, chances are you’ll fall into someone else’s plan. And guess what they have planned for you? Not much.

«Jim Rohn»

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

p{
text-indent : 2rem;
}

در نتیجه خواهیم داشت داریم :

If you don’t design your own life plan, chances are you’ll fall into someone else’s plan. And guess what they have planned for you? Not much. 


نکته 🔍 : این ویژگی برای عناصر بلاک لول اعمال میشود 🌷

نکته 🔍 : مقدار این ویژگی برای فرزندان عنصر مربوطه هم اعمال خواهند شد ، یعنی به نوعی این ویژگی از والد به فرزند ارث خواهد رسید 🌷

نکته 🔍 : اینکه خط اول ، از سمت راست یا چپ فاصله بگیرد ، مرتبط با ویژگی direction هستش 🌷

این ویژگی مقادیر :

em
rem
px
%
vw
vh
مقادیر منفی
و...
inherit
initial

رو به عنوان مقدار میپذیرد 🌷

از این ویژگی اغلب برای خوانا کردن متن استفاده میشود 🌷



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

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

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



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



☘️Join Channel :👇
{
@frozencoding_channel
}

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

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

☘️ text-transform
با استفاده از این ویژگی میتوان مشخص کرد که کلمات از لحاظ بزرگی یا کوچکی در چه حالتی باشند 🌷

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

ابتدا فرض کنید این تگ رو در html داریم :

<p>frOZeN coDiNg</p>

حال بریم سراغ مقادیر .

☘️capitalize
اگر این مقدار رو اعمال بکنیم ، یعنی در css داریم :

p{
text-transform : capitalize;
}

در خروجی داریم :

FrOZeN CoDiNg

این مقدار باعث میشود تا حرف اول کلمات به شکل حروف بزرگ باشند ، مابقی کلمات طبق چیزی که در html نوشته اید خواهند بود 🌷

☘️uppercase

اگر این مقدار رو اعمال بکنیم ، یعنی در css داریم :

p{
text-transform : uppercase;
}

در خروجی داریم :

FROZEN CODING

این مقدار باعث میشود تا تمامی حروف به حروف بزرگ تبدیل شوند🌷

☘️lowercase

اگر این مقدار رو اعمال بکنیم ، یعنی در css داریم :

p{
text-transform : lowercase;
}

در خروجی داریم :

frozen coding

این مقدار باعث میشود تا تمامی حروف به حروف کوچک تبدیل شوند🌷

☘️none
این مقدار باعث میشه تا این ویژگی هیچ گونه تاثیری بر متن نداشته باشه 🌷



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

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

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



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



☘️Join Channel :👇
{
@frozencoding_channel

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

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

☘️ word-spacing

با استفاده از این ویژگی میتوان فاصله بین کلمات یک متن رو مشخص کرد 🌷

برای مثال :

فرض کنید یک تگ <p> در سند html دارید 🌷

<p>frozen coding</p>

و در css :

p{
word-spacing: 2em;
}

در حالت عادی اون متن اینجوری نمایش داده میشه :

frozen coding

بعد از اعمال این ویژگی به صورت زیر نمایش داده میشه :

frozen coding

دقیقا این کارو میکنه فاصله بین کلمات رو مشخص میکنه 🌷

مقادیری که میگیره :

☘️ normal
این ویژگی باعث میشه تا مرورگر با توجه به فونت مربوطه ، حالت پیش فرض رو اعمال بکنه 🌷

☘️ inherit
این ویژگی رو هم بلدید 🌷

و در اخر مقادیری طولی ، مثل rem , em , px و... و همینطور اعداد منفی رو هم میشه بکار برد 🌷


نکته 🔍 : این ویژگی محدود به متن ها نیست ، و برای عناصر اینلاین و اینلاین بلاک هم اعمال میشه و فاصله این عناصر رو هم کنترل میکنه 🌷



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

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

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



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



☘️Join Channel :👇
{
@frozencoding_channel
}

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

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

☘️letter-spacing

با استفاده از این ویژگی میتوان فاصله بین حروف یک کلمه را کنترل کرد 🌷

این ویژگی مقادیر زیر را میگیرد :

☘️ normal
این مقدار باعث میشود مرورگر بر اساس فونت مورد نظر فواصل را در نظر بگیرد 🌷

☘️ inherit
این مورد رو هم بلدید 🌷

☘️ و همچنین میتونید از واحد های مختلف هم استفاده بکنید :

10px
1em
1rem
-2px
و...

مثال :

HTML:
<p>frozen coding</p>

CSS:
p{
letter-spacing : 1em;
}

خروجی :

f r o z e n c o d i n g


این ویژگی در موارد جزئی دیگه هم مورد استفاده قرار میگیره که در اینده که با ویژگی های دیگه اشنا شدیم در جای مناسب بهش اشاره خواهم کرد 🌸


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

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

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



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



☘️Join Channel :👇
{
@frozencoding_channel

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

در این پست قصد داریم به معرفی یک ویژگی جدید بپردازیم ☘️

☘️text-overflow

این ویژگی زمانی مورد استفاده قرار میگیره که یک‌ متن از نگه دارنده اش سر ریز کند و ما بخواهیم کاربر را از این عمل اگاه کنیم 🌷

یک‌ متن در حالتی از نگه دارنده خود سر ریز میکند که ویژگی white-space برابر با مقدار nowrap باشد (این ویژگی را در اینده برسی خواهیم کرد)

و یا متنی داشته باشیم که هیچ فاصله ای بین کلمات اون متن نباشد 🌷


نکته 🔍 : دقت داشته باشید برای این که این ویژگی کار کند باید از ویژگی دیگری به نام overflow با مقدار hidden هم استفاده بکنیم (این ویژگی رو در اینده برسی خواهیم کرد) 🌷


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

<div>
frozencodingfrozencodingfrozen
</div>

الان فرض میگیریم این متن از نگه دارنده خود که div باشد سر ریز کرده 🌷

------------------------------------------------
| |
| frozencodingfrozencodingfroz
| |
------------------------------------------------

اینجوری مثلا از نگه دارنده خودش سر ریز کرده 🌷

این ویژگی مقادیر زیر رو اختیار میکنه:

☘️clip
این مقدار مقدار پیش فرض است و متن سر ریز شده را از جایی که سر ریز کرده برش میدهد و متن داخل نگه دارنده را نشان میده 🌷

☘️ellipsis
این ویژگی هم دقیقا مثل ویژگی بالا عمل میکنه با این تفاوت که در اخر متن یک سه نقطه (...) قرار میده تا به نوعی کاربر بفهمه که این متن ادامه داره و برش خورده 🌷

☘️inherit
این ویژگی رو هم بلدید 🌷


پس در css :

div{
overflow : hidden;
text-overflow : clip;
}

با این ویژگی ها خروجی به شکل زیر تغییر میکنه :


------------------------------------------------
| |
| frozencodingfrozencodingf |
| |
------------------------------------------------


اگر css رو به شکل زیر تغییر بدیم :


div{
overflow : hidden;
text-overflow : ellipsis;
}

در خروجی خواهیم داشت :


------------------------------------------------
| |
| frozencodingfrozencoding... |
| |
------------------------------------------------



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

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

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



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



☘️Join Channel :👇
{
@frozencoding_channe
}

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

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

☘️word-break

این ویژگی باعث میشه تا بتونیم مشخص کنیم که اگر یک متن به اخر خط رسید ، در صورت لزوم متن از وسط کلمه بشکند یا خیر 🌷

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

☘️ normal
این normal مقدار پیش فرض ویژگی هستش وباعث میشه تا خطوط بر اساس قوانین عادی شکسته بشه ، البته بجز در زبان های چینی و کره ای و ژاپنی ، باعث میشه خطوط از وسط شکسته نشه ، اما در این سه زبان خطوط رو از وسط میشکنه 🌷

☘️ keep-all
این مقدار به هیچ عنوان اجازه نمیده تا خط از وسط کلمه شکسته بشه 🌷

☘️ break-all
این مقدار باعث میشه تا متن در صورت لزوم از وسط کلمه شکسته بشه 🌷



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

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

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



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



☘️Join Channel :👇
{
@frozencoding_channe
}

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

وقت بخیر 🌸

در این پست قصد داریم با یک ویژگی جدید اشنا بشیم 🌷


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


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

☘️normal
این مقدار باعث میشود تا خطوط بر اساس قوانین عادی شکسته شود 🌷

☘️break-word
این ویژگی باعث میشود تا کلمات طولانی به خط بعد شکسته شوند 🌷


نکته 🔍 : نام قبلی این ویژگی word-wrap بوده و نام overflow-wrap به عنوان جایگزین قرار گرفته 🌷


نکته 🔍 : کلمات طولانی به خط بعد شکسته نمیشه اگر ویژگی white-space (در یک یا دو پست اینده بهش خواهیم پرداخت) اجازه شکسته شدن رو نده 🌷


نکته 🔍 : تنها تفاوتی که بین ویژگی overflow-wrap و word-break هست ، و اونم اینه که overflow-wrap در خصوص خود کلمه و word-break در خصوص خط تصمیم میگیره و عمل میکنه 🌷



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

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

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



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



☘️Join Channel :👇
{
@frozencoding_channe
}

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}

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


☘️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
}

اینم ویدیو عملی تمرین بالا 🌺🌸



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

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


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



☘️Join Channel :👇
{
@frozencoding_channel
}