box-sizing : border-box এটি একটি CSS property . এই প্রোপার্টিতে padding এবং margin আপনার কন্টেন্ট এর Width এবং height এর উপর apply হবে অর্থাৎ আপনি যদি কন্টেন্ট width: 300px এবং height: 200px দেন। padding: 15px and border: 5px solid green; দেন তখন আপনার কন্টেন্ট width হবে 300-(15+5) =280px আর height হবে 200-(15+5) = 180px
মনে রাখা দরকার এখানে কোন margin হিসাব count হবে না । কারণ এটা সব সময় এলিমেন্টের থেকে আলাদা থাকে।
box-sizing: content-box এই প্রোপাটি যা করে তা হল border-box এর উলটা কাজ করে । অর্থাৎ এখানে padding, border value কন্টেন্ট width, height এর উপরে কোন প্রভাব ফেলবে না।
width = 300+15+5 =320px
height = 200+15+5 = 220px
image source
0 Comments