ওয়েব পাতার প্রতিটি এলিমেন্টই একটি বাক্স। স্লাইডার টেনে দেখুন content, padding, border আর margin কীভাবে একটির উপর আরেকটি বসে — আর কেন ২০০px-এর একটি বাক্স প্রায়ই ২০০px চওড়া হয় না।
CSS বক্স মডেল পাঠটি পড়ুনwidth শুধু কনটেন্টের মাপ ঠিক করে — padding আর border তার উপরে যোগ হয়।
কোন স্তর কী করে জানতে তার উপর মাউস রাখুন বা ট্যাপ করুন।
content 220px
+ padding 20+20px
+ border 8+8px
= 0px
.box {
width: 220px;
height: 140px;
padding: 20px;
border-width: 8px;
border-style: solid;
border-color: #f59e0b;
border-radius: 8px;
margin: 24px;
font-size: 16px;
}