CSS Box Model

Box Model কী?

প্রতিটি HTML element একটি আয়তাকার বাক্স যার ৪টি স্তর আছে:

┌─────────────────── Margin ────────────────────┐
│  ┌─────────────── Border ──────────────────┐  │
│  │  ┌─────────── Padding ────────────────┐ │  │
│  │  │                                    │ │  │
│  │  │         Content (text/image)       │ │  │
│  │  │                                    │ │  │
│  │  └────────────────────────────────────┘ │  │
│  └─────────────────────────────────────────┘  │
└───────────────────────────────────────────────┘

প্রতিটি অংশের ব্যাখ্যা

• Content — আসল text/image (width × height)
• Padding — content ও border এর মাঝের space (ভিতরের খালি জায়গা)
• Border — বাক্সের সীমানা
• Margin — বাক্সের বাইরের space (অন্য element থেকে দূরত্ব)

উদাহরণ

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 30px;
    background: lightblue;
}

/* সংক্ষিপ্ত লেখার নিয়ম */
padding: 10px;              /* চারদিকে 10px */
padding: 10px 20px;          /* top-bottom 10px, left-right 20px */
padding: 10px 20px 30px;     /* top, left-right, bottom */
padding: 10px 20px 30px 40px; /* top, right, bottom, left */

margin: auto;  /* কেন্দ্রে আনতে */

box-sizing (অত্যন্ত গুরুত্বপূর্ণ!)

/* Default: content-box */
.box {
    width: 300px;
    padding: 20px;
    border: 2px solid;
    /* আসল width = 300 + 40 + 4 = 344px */
}

/* সেরা পদ্ধতি: border-box */
* {
    box-sizing: border-box;
}
.box {
    width: 300px;
    padding: 20px;
    border: 2px solid;
    /* আসল width = 300px (padding+border ভিতরে হিসাব) */
}

Border প্রোপার্টি

.box {
    border: 2px solid red;                    /* সংক্ষিপ্ত */
    border-width: 2px;
    border-style: solid;  /* dashed, dotted, double, groove */
    border-color: red;
    border-radius: 10px;                      /* গোল কোণা */
    border-radius: 50%;                       /* বৃত্ত */
}

Display Property

display: block;        /* পুরো width, নতুন লাইন (div, p, h1) */
display: inline;       /* শুধু content width (span, a) */
display: inline-block; /* inline কিন্তু width/height কাজ করে */
display: none;         /* সম্পূর্ণ লুকায় (space-ও নেয় না) */
visibility: hidden;    /* লুকায় কিন্তু space থাকে */
display: flex;         /* Flexbox */
display: grid;         /* Grid */