آیلین وب

بخش آپدیت های مقاله
آموزش ویدئویی در تاریخ 27 مرداد 98 اضافه شد .

سلام دوباره خدمت همه دوستان در جلسه هشتم از دوره ی آموزشی HTML و CSS خدمت شما هستیم تا مباحث جدید و جذاب تری را به شما آموزش دهیم . عاشقان طراحی وب با ما همراه باشید که امروز میخواهیم در مورد padding ، margin و float صحبت بکنیم و مطمئن باشید که این مباحث امروز تا آخر آموزش های طراحی وب با شما همراه خواهد شد . دوستان عزیز با ما همراه باشید تا این این جلسه رو هم به خوبی تموم کنیم . پس با ما همراه باشید….

خصوصیات margin در CSS :

در همین ابتدا یه تعریف کوچک و مختصر از margin بهتون بگم که فواصل بیرونی هر بخش را margin می گویند و حالا بریم سراغ معرفی مقدار هایی که این خصوصیت میگیرد .

  • margin-top 

با این مقدار شما میتوانید که فاصله از بالا را تنظیم کنید به این صورت که المان شما چقدر از بالا فاصله داشته باشد.

  • margin-right

این مقدار هم به شما کمک میکند که شما فاصله المان را از سمت راست تنظیم کنید .

  • margin-bottom

برای شما فاصله از پایین را تنظیم میکند .

  • margin-left 

این مقدار هم به شما فاصله از سمت چپ را هماهنگ میکند .

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

p

{

margin: 25px 50px 70px 90px;

}

در کد بالا به ترتیب مقادیر به صورت گردش ساعتی کار میکند(بالا ، راست ، پایین ، چپ) کار میکند (در ویدئو کامل کار شده است)

پیشنهاد آیلین وب : آشنایی با رنگ ها و border ها در Html 

حتی به صورت مخفف شده هم میتوانید با margin کار کنید برای مثال:

p

{

margin: 50px 60px 70px;

margin: 20px 30px;

margin: 50px;

}

در margin که سه مقدار دارد به این شکل است که اول بالا و مقدار وسطی چپ و راست را باهم شامل میشود و مقدار آخری پایین را شامل میشود.

خط دوم از margin به ترتیب بالا و پایی مقدار اول و مقدار دوم هم راست و چپ را شامل میشود.

خط سوم از هر چهار طرف 50 پیکسل فاصله میگیرد.

نکته : اگر مقدار Margin را به auto قرار دهید محتوای شما کاملا در وسط قرار میگیرد .

خصوصیات padding در CSS :

با مقدار دهی Padding فواصل داخلی را در نظر میگیرد و به شما این امکان را میدهد که فاصله از داخل محتوا انجام شود . و این خاصیت هم دارای چهار مقدار است که تقریبا شبیه به margin عمل میکند.

padding-top 

padding-right

padding-bottom

padding-left

این مقادیری است که padding میگیرد و مثل margin که در بالا گفتم میتوانید به صورت اختصار هم بنویسید.

file CYKDge2Gej - آموزش HTML - CSS (خاصیت های Margin , padding , display ,float در CSS)
تفاوت margin و padding در css

خاصیت float در CSS :

در این قسمت هم در مورد Float میخواهیم صحبت بکنیم که به المان ها در css خاصیت شناور بودن میدهد به این شکل که تگ های block level را به text level تبدیل میکند در جلسات قبل در مورد این ها صحبت کردیم .

به عنوان مثال شما عملا نمی توانید که دو تگ p را کنار هم قرار دهید ولی با خاصیت float میتوانید این کار را انجام دهید .

مطالعه بیشتر : آشنایی با تگ ها , خصوصیات در html 

float دارای دو مقدار right و left دارد که المان مورد نظر را به چپ یا راست هدایت میکند .

خاصیت clear در css :

خاصیت clear دقیقا برعکس float عمل میکند و به شما این امکان را میدهد که آن المان هایی که خاصیت float را گرفته اند رو خنثی کند .

p

{

clear:left

}

مثل تکه کد بالا که سمت چپ را clear میکند و حتی شما میتوانید که از مقدار both استفاده کنید تا این که هر دو طرف را clear کنید .

خاصیت display در CSS :

ما در خاصیت float المان هایی که block level  به text level تبدیل کنیم ولی با display میتوانیم تبدیل به block level تبدیل کنیم و حتی آنها را نمایش ندهیم .

که دارای چندین مقدار هست .

امیدوارم که از این آموزش هم تمام استفاده رو برده باشید و حتما مباحثی که گفته میشود تمرین کنید و به تمام ویدئو ها نگاه کنید تا بتوانید سرعت یاد گرفتن خود را افزایش دهید.

اگر هر گونه سوال یا پیشنهادی در رابطه با آموزش ها دارید حتما با ما در میان بگذارید تا و مطمئن باشید که ما در اولین فرصت به سوال های شما جواب خواهیم داد.

8 دیدگاه دربارهٔ «آموزش HTML – CSS (خاصیت های Margin , padding , display ,float در CSS)»

  1. سلام
    امیدوارم که حالتون خوب باشه
    ممنون از آموزش خوبتون
    آسا این 8 قسمت اموزش css و html ما رو از سایر آموزش ها بی نیاز میکنه؟
    مطالب گفته شده برای طراحی قالب یک سایت کافی هست؟

  2. ممنون از وقتتون مهندس
    این سری آموزش های css و html و تموم کردم
    باید تمرین کنم.
    شما اموزش مناسب و جامعی سراغ دارید برای جاوا اسکریپت؟

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد میکنیم این مقالات را هم بخوانید
هاست ویندوز و هاست لینوکس : کدوم رو انتخاب کنم؟

هاست ویندوز و هاست لینوکس

قبل از راه اندازی و ساخت سایت با وردپرس  باید حتما قبلش

آموزش ساخت مگامنو در المنتور (رایگان) + 📽فیلم آموزشی

آموزش ساخت مگامنو در المنتور

با آموزش ساخت مگامنو در المنتور در خدمت شما عزیزان هستم و

کپی کردن صفحات المنتور به صورت کامل از یک سایت به سایت دیگر + (فیلم آموزشی)

کپی کردن صفحات المنتور به

شاید برای خیلی از شماها پیش اومده که توی طراحی صفحات با

دوره آموزش (🥉مبتدی) قالب فلت سام Flatsome

دوره آموزش (🥉مبتدی) قالب فلت

دوره آموزش مبتدی قالب فلت سام Flatsome دوستان گلم، تصمیم گرفتم که

مطالب داغ
اسکرول به بالا