CSS3 Box-Sizing দিয়ে বক্স প্রস্থ নির্ধারণ

box-sizing প্রপার্টি ব্যবহার করে শুধু এলিমেন্টের প্রস্থ নয়, উচ্চতাও পরিবর্তন করুন।

উদাহরণ

নিচের কোডটি CSS3 ব্যবহার করে box-sizing দিয়ে বক্স প্রস্থ দেখায়:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    width: 200px;
    height: 200px;
    display: inline-block;
}
.contentBox {
    padding: 50px;
    border: 1px solid rgb(255, 0, 128);
}
.borderBox {
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid rgb(194, 0, 194);
}
</style>
</head>
<body>
<h1>Box sizing example using CSS</h1>
<div class="contentBox"> This div doesn't have box sizing property that's why it looks bigger </div>
<div class="borderBox"> This div has box sizing property </div>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

CSS3 Box-Sizing দিয়ে বক্স প্রস্থ নির্ধারণ