۱۳۸۸ مرداد ۱۳, ۱۰:۲۵ ب.ظ
سلام دوستان،
حقیقتاً من تا به همین الان نمی دونستم که چطوری باشد مقادیر margin و padding رو مشخص کنم. بازم دم w3schools.com گرم که تمام این اطلاعات رو به رایگان در اختیار ما قرار میده.
به این عکس به دقت نگاه کنید و مطمئنم خودتون متوجه میشید که کدوم در کجا استفاده میشه:
میدونم متوجه شدید اما باز من توضیحی میدم. ببینید ما یک محتوا داریم که padding فاصله اون از border رو میده و margin فاصله border از صفحه رو.
w3schools جان اومده و با یک مثال جالب کل موضوع رو روشن کرده و منم از همین مثال ایشون استفاده می کنم.
ما یک صفحه داریم با عرض 300 پیکسل. برای انتخاب مقادیر باید مثل زیر عمل کنیم:
یعنی میشه زیر:
در کل به زبان پارسی می تونم بگم از 300 پیکسل، 20 تاش رفت واسه padding و 10 تاش برای border رفت و همینطور 20 تاش برای margin رفت و در آخر ما باید اندازه اون صفحه رو بجای اینکه width: 300px تعیین کنیم، باید width: 250px تعیین کنیم.
خدا پدر و مادر w3schools رو بیامرزه که هرچی یاد میگیری میگیریم از اینه
حقیقتاً من تا به همین الان نمی دونستم که چطوری باشد مقادیر margin و padding رو مشخص کنم. بازم دم w3schools.com گرم که تمام این اطلاعات رو به رایگان در اختیار ما قرار میده.
به این عکس به دقت نگاه کنید و مطمئنم خودتون متوجه میشید که کدوم در کجا استفاده میشه:
![[عکس: box-model.gif]](https://www.w3schools.com/css/box-model.gif)
میدونم متوجه شدید اما باز من توضیحی میدم. ببینید ما یک محتوا داریم که 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
+ 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 رو بیامرزه که هرچی یاد میگیری میگیریم از اینه
