box-sizing: border-box;  چیست؟

حتما وقتی به یک دایو عرض و ارتفاع مورد نظر رو میدید،بعد از اینکه به همون دایو padding و border بدید؛ میبینید که عرض padding و border به عرض و ارتفاع دایو (div) اضافه شده. خب باید چکار کنیم؟ حتما میرید و به همون مقدار که padding و border دادید ، از عرض و ارتفاع دایو کم میکنید.

خب یک راه دیگه هم هست.استفاده از box-sizing: border-box .به تصویر توجه کنید.

vvc

همونطور که دیدید، به جای اینکه border و padding به بیرون از دایو اضافه بشه؛ به داخل دایو اعمال میشه.

میتونید به این شکل ازش استفاده کنید:

ssw