09902090383

09337734689

تهران، خیابان شریعتی، خیابان معلم

resume.webbyme.ir

تلگرام طراحی سایت وب من

09902090383

09127363007

Top

box sizing چیست

box sizing

box sizing چیست

box sizing

زمانی که شما از عنصری در صفحه استفاده میکنید اندازه های آن شامل چند بخش می باشد که شامل اندازه داخلی(content-box)
فاصله داخلی(padding-box)
فاصله خارجی(margin-box)
مقدار حاشیه(border-box)
در حالت عادی زمانی که شما برای عنصری طول و ارتفاع در نظر میگیرید در واقع همان اندازه content می باشد ولی زمانی که موارد padding,margin,border را به عنصر خود اضافه میکنید همان مقدار از هر طرف به عنصر شما اضافه میشود.

مثال:

CSS

width:100px;
height:150px;
padding:20px;
box-sizing: content-box;

در مورد بالا در واقع ارتفاع ما 20px از طرف بالا و 20px از طرف پایین به آن اضافه شده و در مجموع190px ارتفاع دارد و همچنین با عرض 140px
با استفاده از کد box-sizing:content-box; تعیین میکند که اندازه عنصر شما اعمال شود و اندازه های دیگر تاثیری در آن نخواهد داشت.

پشتیبانی در مرورگرها

Chrome Safari Firefox Opera IE Android iOS
Any +3 +1 +7 +8 +2.1 Any

مقالات مرتبط

padding

مطالعه بیشتر

box-sizing

هیچ نظری وجود ندارد

متاسفانه امکان گذاشتن نظر وجود ندارد.