box-sizing: border-box; چیست؟
حتما وقتی به یک دایو عرض و ارتفاع مورد نظر رو میدید،بعد از اینکه به همون دایو padding و border بدید؛ میبینید که عرض padding و border به عرض و ارتفاع دایو (div) اضافه شده. خب باید چکار کنیم؟ حتما میرید و به همون مقدار که padding و border دادید ، از عرض و ارتفاع دایو کم میکنید.
خب یک راه دیگه هم هست.استفاده از box-sizing: border-box .به تصویر توجه کنید.
همونطور که دیدید، به جای اینکه border و padding به بیرون از دایو اضافه بشه؛ به داخل دایو اعمال میشه.
میتونید به این شکل ازش استفاده کنید:
