وقتی که داریم درباره ی پهنا حرف میزنیم، به یک مساله ی مهم هم باید اشاره کنیم و آن مدل جعبه است. وقتی که شما برای یک عنصر پهنای خاصی را در مقدار دهی میکنید، باید در نظر داشته باشید که احتمالا عنصر شما بزرگتر از آن خواهد شد: حاشیه و padding هم باید به آن اضافه کنید، زیرا که حاشیه و padding خارج از خود عنصر هستند. به این مثال دقت کنید، در آن پهنای دو جعبه به یک اندازه در نظر گرفته شده اند، اما نتیجه ی خروجی دو جعبه ی با اندازه ی متفاوت است.
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}
من کوچکتر هستم
</div>من بزرگتر هستم
</div>برای مدتهای زیادی تنها راه حل برای این مشکل استفاده از محاسبات بود. طراحان پهنایی کمتر از آنچه را که میخواستند در نظر میگرفتند، و اندازه ی حاشیهها و padding را به آن اضافه میکردند. خوشبختانه دیگر نیازی به این کار نیست ...