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