آموزش HTML – CSS (خاصیت های Margin , padding , display ,float در CSS)

سلام دوباره خدمت همه دوستان در جلسه هشتم از دوره ی آموزشی 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 که در بالا گفتم میتوانید به صورت اختصار هم بنویسید.

خاصیت 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 تبدیل کنیم و حتی آنها را نمایش ندهیم .

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

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

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