انجمن برنامه نویسان البرز

تبلیغات

آموزش استفاده از margin و paadding در css

آموزش استفاده از margin و paadding در css


با سلام خدمت کاربران عزیز امروز میخواهیم نحوه استفاده از margin و paadding در CSS را به شما عزیزان آموزش بدهیم. از margin و paadding در css برای فواصل داخلی و خارجی المانهای موجود در صفحه اسفاده میشود . از padding ها برای فواصل داخلی و از margin ها برای فواصل خارجی استفاده میشود برای مثال فرض کنید چند تگ p در صفحه ی مورد نظر خود داریم و میخواهیم فاصله ی خارجی آنها از یکدیگر را تنظیم کنیم . فقط کافیست از margin ها استفاده کنیم به قطعه کد زیر توجه کنید ( در قسمت HTML کدهای مربوط به HTML و در قسمت CSS کدهای مربوط به استایل نوشته میشود ، در پایان در قسمت Result میتوانید نتیجه را مشاهده کنید.)

همانطور که مشاهده میکنید بین متنها فواصلی وجود دارد که آنها را از یکدیگر متمایز کرده است و همانظور که انتظار میرفت این فواصل margin ها میباشند.
از margin و paadding در CSS به صورتهای ۴ پارامتری ، ۳ پارامتری ، ۲ پارامتری و ۱ پارامتری استفاده میشود. به قطعه کد زیر توجه کنید :


.first {
	margin : 16px; /* از تمامی جهات */
	padding: 16px;
}
.second {
	margin : 10px 16px; /* عدد اول از بالا و پایین و عدد دوم از چپ و راست */
	padding: 10px 16px;
}
.third {
	margin : 10px 16px; /* عدد اول از بالا ، عدد دوم از چپ و راست و عدد سوم از پایین */
	padding: 10px 16px;
}
.forth {
	margin : 10px 16px 10px 15px; /* به صورت ساعت گرد عدد اول از بالا عدد دوم از راست عدد سوم از پایین و عدد چهارم از چپ*/
	padding: 10px 16px 10px 15px;
}
	

۱ پارامتری : از تمامی جهات فاصله ی مورد نظر را اعمال مینماید یعنی از بالا ، پایین ، چپ و راست
۲ پارامتری : عدد اول برای فاصله از بالا و پایین و عدد دوم برای فاصله از چپ و راست
۳ پارامتری : عدد اول فاصله از بالا عدد دوم فاصله از چپ و راست و عدد سوم فاصله از پایین
۴ پارامتری : عدد اول فاصله از بالا عدد دوم فاصله از راست عدد سوم فاصله از پایین و عدد چهارم فاصله از پایین

همچنین میتوان از هر جهت margin و paadding مربوط به همان جهت را نوشت به شکل زیر :


.first {
	margin-right : 16px; 
	padding-right: 16px;
}
.second {
	margin-left : 15px;
	padding-left: 15px;
}
.third {
	margin-top : 15px;
	padding-top: 15px;
}
.forth {
	margin-bottom:  15px;
	padding-bottom: 15px;
}
	

اما از padding ها برای فواصل درونی استفاده میشود به قطعه کد زیر توجه کنید :

همانطور که مشاهده میکنید از تمامی جهات مربع قرمز رنگ ، به اندازه ی ۴۰px فاصله داخلی اعمال شده است . شایان ذکر است که اگر قصد این را داشتیم که این فاصله فقط از سمت راست باشد از padding-right ، اگر میخواستیم فاصله فقط از سمت چپ باشد از padding-left اگر میخواستیم فاصله فقط از بالا باشد از padding-top و در نهایت اگر میخواستیم فاصله فقط از پایین باشد از padding-bottom استفاده میکردیم . میتوانید حدس بزنید اگر میخواستیم فاصله از بالا و پایین به میزان ۴۰px و از چپ و راست به میزان ۲۰px باشد باید از چه کدی استفاده میکردیم؟




کلمات کلیدی :

نظر بدهید