نحوه انتخاب مقادیر صحیح برای padding و margin

[cyletech]

سلام دوستان،

حقیقتاً من تا به همین الان نمی دونستم که چطوری باشد مقادیر margin و padding رو مشخص کنم. بازم دم w3schools.com گرم که تمام این اطلاعات رو به رایگان در اختیار ما قرار میده.

به این عکس به دقت نگاه کنید و مطمئنم خودتون متوجه میشید که کدوم در کجا استفاده میشه:

میدونم متوجه شدید اما باز من توضیحی میدم. ببینید ما یک محتوا داریم که padding فاصله اون از border رو میده و margin فاصله border از صفحه رو.

w3schools جان اومده و با یک مثال جالب کل موضوع رو روشن کرده و منم از همین مثال ایشون استفاده می کنم.

ما یک صفحه داریم با عرض 300 پیکسل. برای انتخاب مقادیر باید مثل زیر عمل کنیم:

کد پی‌اچ‌پی:

body {
  width:250px;
  padding:10px;
  border:5px solid gray;
  margin:10px; 
} 


یعنی میشه زیر:

250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

در کل به زبان پارسی می تونم بگم از 300 پیکسل، 20 تاش رفت واسه padding و 10 تاش برای border رفت و همینطور 20 تاش برای margin رفت و در آخر ما باید اندازه اون صفحه رو بجای اینکه width: 300px تعیین کنیم، باید width: 250px تعیین کنیم.

خدا پدر و مادر w3schools رو بیامرزه که هرچی یاد میگیری میگیریم از اینه