سلام دوباره خدمت همه دوستان در جلسه هشتم از دوره ی آموزشی HTML و CSS خدمت شما هستیم تا مباحث جدید و جذاب تری را به شما آموزش دهیم . عاشقان طراحی وب با ما همراه باشید که امروز میخواهیم در مورد padding ، margin و float صحبت بکنیم و مطمئن باشید که این مباحث امروز تا آخر آموزش های طراحی وب با شما همراه خواهد شد . دوستان عزیز با ما همراه باشید تا این این جلسه رو هم به خوبی تموم کنیم . پس با ما همراه باشید….
[toc]خصوصیات margin در CSS :
در همین ابتدا یه تعریف کوچک و مختصر از margin بهتون بگم که فواصل بیرونی هر بخش را margin می گویند و حالا بریم سراغ معرفی مقدار هایی که این خصوصیت میگیرد .
- margin-top
با این مقدار شما میتوانید که فاصله از بالا را تنظیم کنید به این صورت که المان شما چقدر از بالا فاصله داشته باشد.
- margin-right
این مقدار هم به شما کمک میکند که شما فاصله المان را از سمت راست تنظیم کنید .
- margin-bottom
برای شما فاصله از پایین را تنظیم میکند .
- margin-left
این مقدار هم به شما فاصله از سمت چپ را هماهنگ میکند .
تمام این مقادیر را میتوان به صورت خطی در یک خط کد نوشت که ما هر دو مدل را بررسی میکنیم
1 2 3 4 5 6 7 |
p { margin: 25px 50px 70px 90px; } |
در کد بالا به ترتیب مقادیر به صورت گردش ساعتی کار میکند(بالا ، راست ، پایین ، چپ) کار میکند (در ویدئو کامل کار شده است)
پیشنهاد آیلین وب : آشنایی با رنگ ها و border ها در Html
حتی به صورت مخفف شده هم میتوانید با margin کار کنید برای مثال:
1 2 3 4 5 6 7 8 9 10 11 |
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 که در بالا گفتم میتوانید به صورت اختصار هم بنویسید.

خاصیت float در CSS :
در این قسمت هم در مورد Float میخواهیم صحبت بکنیم که به المان ها در css خاصیت شناور بودن میدهد به این شکل که تگ های block level را به text level تبدیل میکند در جلسات قبل در مورد این ها صحبت کردیم .
به عنوان مثال شما عملا نمی توانید که دو تگ p را کنار هم قرار دهید ولی با خاصیت float میتوانید این کار را انجام دهید .
مطالعه بیشتر : آشنایی با تگ ها , خصوصیات در html
float دارای دو مقدار right و left دارد که المان مورد نظر را به چپ یا راست هدایت میکند .
خاصیت clear در css :
خاصیت clear دقیقا برعکس float عمل میکند و به شما این امکان را میدهد که آن المان هایی که خاصیت float را گرفته اند رو خنثی کند .
1 2 3 4 5 6 7 |
p { clear:left } |
مثل تکه کد بالا که سمت چپ را clear میکند و حتی شما میتوانید که از مقدار both استفاده کنید تا این که هر دو طرف را clear کنید .
خاصیت display در CSS :
ما در خاصیت float المان هایی که block level به text level تبدیل کنیم ولی با display میتوانیم تبدیل به block level تبدیل کنیم و حتی آنها را نمایش ندهیم .
که دارای چندین مقدار هست .
امیدوارم که از این آموزش هم تمام استفاده رو برده باشید و حتما مباحثی که گفته میشود تمرین کنید و به تمام ویدئو ها نگاه کنید تا بتوانید سرعت یاد گرفتن خود را افزایش دهید.
اگر هر گونه سوال یا پیشنهادی در رابطه با آموزش ها دارید حتما با ما در میان بگذارید تا و مطمئن باشید که ما در اولین فرصت به سوال های شما جواب خواهیم داد.
۸ دیدگاه دربارهٔ «آموزش HTML – CSS (خاصیت های Margin , padding , display ,float در CSS);
ببخشید این قسمت آخر اموزش html و css هست؟
شاید در آینده باز هم قرار داده بشه
سلام
امیدوارم که حالتون خوب باشه
ممنون از آموزش خوبتون
آسا این ۸ قسمت اموزش css و html ما رو از سایر آموزش ها بی نیاز میکنه؟
مطالب گفته شده برای طراحی قالب یک سایت کافی هست؟
سلام ممنونم
سعی شده که تممی بخش ها گفته بشه و شما حتما باید تمرین کنید و با همین آموزش ها میتونید تمرین رو شروع کنید.
ممنون از وقتتون مهندس
این سری آموزش های css و html و تموم کردم
باید تمرین کنم.
شما اموزش مناسب و جامعی سراغ دارید برای جاوا اسکریپت؟
خواهش میکنم
بله با تمرین و تکرار و ازمون و خطا میتونید یاد بگیرید و بهترین روش هست.
توی گوگل باید جستجو کنید ولی یوتیوب یادتون نره
سلام ممنون از ویدئو های خوبتون قسمت هشتم اخرین قسمت هست
سلام دوست عزیز
در ادامه ضبط خواهد شد