ورود ثبت نام

padding ها در css

padding ها در css
به نام خدا در این قسمت قسط داریم padding ها در css را یاد بگیریم.در آموزش های قبل با margin آشنا شدیم.margin فاصله ی بیرونی را برای ما مشخص میکرد.ولی اینجا ما فاصله ی درونی داریم.یعنی فاصله ی محتوای المان با مرز های خودش.با mosqdevelopers همراه باشید.

padding ها

ساختار padding ها هم مثل margin هاست.فقط به جایه این که فاصله ی بیرونی داشته باشیم.فاصله ی درونی داریم:
.div_padding{
	background-color:green;
	padding: 40px;
}

سلام

مشاهده میکنید که محتوای داخل کلاس div_padding ازهمه جهات فاصله ی درونی دارد.padding هم از قانون ها margin پیروی میکند:
div{
	padding-top: 50px;
	padding-right: 30px;
	padding-bottom: 50px;
	padding-left: 80px;
}
div{
	padding:50px 30px 50px 80px; /*top right bottom left*/
	padding:50px 30px 80px; /* top (right-left) bottom*/  
	padding: 50px 80px; /* (top-bottom) (right-left)*/
	padding: 50px; /* (top-right-bottom-left)*/
}
نکته ای که قابل ذکر است این است که شما المانی که دارید یک عرض مشخص دارد.اگر به آن padding اضافه کنید عرض آن هم اضافه میشود:
.width_div{
	width:300px;
	background-color:green;
}

this width is 300 px

.width_padding{
	width:300px;
	padding: 20px;
	background-color:green;
}

this width is 340 px

مشاده میکنید که عرض دومی بیشتر شد یعنی 340px . و آن هم به خاطر دوتا padding چپ و راست هست که هر کدام به مثدار 20px اضافه شده اند. اگر میخواهید عرض خود را در همین 300px نگه دارید باید از پراپرتی به اسم box-sizing استفاده کنید.در قسمت بعد با box-model آشنا میشیم که کمک میکند شما box-sizing را بهتر متوجه شوید:
.padding_box_sizing{
	width:300px;
	padding: 20px;
	box-sizing: border-box;
	background-color:green;
}

this width is 300 px

border-box یعنی فاصله ها را تا مرز که میشه همان border نگه دار.هر padding که شما وارد کنید تا مرز border عمل میکند نه خارج از آن.با این کار ما عرض المان مورد نظرمان را که 300px بود نگه داشتیم. به این مطلب توجه کنید که بعضی اوقات ما فاصله های مختلفی را همراه با width به یک المان میدهیم ولی در آخر میبینیم که اون المان عرضی که ما میخواستیم را ندارد و بزرگ تر شده است.پس حواستان به box-sizing باشد. تا قسمت بعد...

0 273

telegram mosqdevelopers


دسته بندی ها

ios

پست های اخیر

banner

کتابخوان های الکترونیکی برتر

به نام خدا ؛ تاحالا شده وقتت ت...

ادامه مطلب


banner

ساخت جداول گوناگون در css

به نام خدا. در این قسمت میخوا...

ادامه مطلب


banner

مدل باکس در css

به نام خدا در این قسمت قسط د...

ادامه مطلب


banner

background ها در css

به نام خدا در این بخش میخواه...

ادامه مطلب


banner

padding ها در css

به نام خدا در این قسمت قسط د...

ادامه مطلب


RSS RSS

© کلیه حقوق مادی و معنوی متعلق به تیم برنامه نویسی Mosquito Network می باشد