در باره این سایت

وقتی که داریم درباره ی پهنا حرف می‌زنیم، به یک مساله ی مهم هم باید اشاره کنیم و آن مدل جعبه است. وقتی که شما برای یک عنصر پهنای خاصی را در مقدار دهی می‌کنید، باید در نظر داشته باشید که احتمالا عنصر شما بزرگتر از آن خواهد شد: حاشیه و padding هم باید به آن اضافه کنید، زیرا که حاشیه و padding خارج از خود عنصر هستند. به این مثال دقت کنید، در آن پهنای دو جعبه به یک اندازه در نظر گرفته شده اند، اما نتیجه ی خروجی دو جعبه ی با اندازه ی متفاوت است.

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

برای مدت‌های زیادی تنها راه حل برای این مشکل استفاده از محاسبات بود. طراحان پهنایی کمتر از آنچه را که می‌خواستند در نظر می‌گرفتند، و اندازه ی حاشیه‌ها و padding را به آن اضافه می‌کردند. خوشبختانه دیگر نیازی به این کار نیست ...