Box model — content, padding, border, margin আর box-sizing

১ · প্রতিটি element একটি বাক্স — বাঁধানো ছবির গল্প

আগের তিন পর্বে আপনি CSS-এর নিয়ম লিখতে, selector দিয়ে element বাছতে আর কোন নিয়ম জেতে তা বুঝতে শিখেছেন। এবার প্রশ্ন হলো, ব্রাউজার পাতাটা আঁকে কীভাবে? উত্তরের প্রথম ধাপ একটি সহজ কিন্তু শক্তিশালী ধারণা: ব্রাউজারের চোখে পাতার প্রতিটি element একটি আয়তাকার বাক্স। শিরোনাম একটি বাক্স, প্যারাগ্রাফ একটি বাক্স, একটি লিংক বা মোটা করা শব্দও একটি (বা কয়েকটি) বাক্স। গোল ছবি বা বাঁকা কোণের বোতামও ভেতরে ভেতরে আয়তক্ষেত্র — গোলাইটা শুধু আঁকার সময় যোগ হয়।

প্রতিটি বাক্সের মাপ আর চারপাশের ফাঁকা জায়গা কীভাবে হিসাব হবে, তার নিয়মের নাম box model. CSS-এ লেআউটের যত কৌশল আছে — Flexbox, Grid, রেসপন্সিভ ডিজাইন — সবকিছুর নিচে এই হিসাবটাই কাজ করে। তাই এই পর্বটি ভালো করে বুঝলে পরের প্রায় প্রতিটি পর্ব সহজ হয়ে যাবে।

বাক্সগুলো নিজের চোখে দেখার সবচেয়ে সহজ কৌশল হলো সব element-কে একটি দাগ দিয়ে ঘিরে দেওয়া। নিচের এডিটরে একটি ছোট দোকানের পাতা আছে, আর ওপরের <style> অংশে * selector দিয়ে সবার গায়ে লাল outline দেওয়া হয়েছে (outline কী, তা অংশ ৮-এ বিস্তারিত দেখব — এটি এমন দাগ, যা কোনো জায়গা নেয় না)।

<style>
  * { outline: 2px solid tomato; }
</style>
<h2>রহিম স্টোর</h2>
<p>চাল, ডাল, তেল সব পাবেন <strong>পাইকারি দামে</strong>,
   এখনই <a href="#order">অর্ডার করুন</a></p>
<ul>
  <li>মিনিকেট চাল</li>
  <li>মসুর ডাল</li>
</ul>
<button id="order">কার্টে যোগ করুন</button>

২ · বাক্সের চার স্তর — content, padding, border, margin

এবার স্তরগুলো একে একে চিনে নিই। নিচের ডায়াগ্রামে “পরে” চাপলে ভেতর থেকে বাইরের দিকে একটি করে স্তর যোগ হবে, আর শেষ ধাপে দেখবেন ব্রাউজারের DevTools ঠিক এই ছবিটাই কীভাবে দেখায়।

এবার নিজের হাতে একটি বাঁধানো ছবি বানান। নিচের CSS-এ চারটি স্তরের প্রতিটির পাশে মন্তব্যে লেখা আছে সে কোন অংশ।

.photo {
  width: 200px;
  height: 100px;
  /* ছবি শুধু content-এ, ম্যাটের রং padding-এ */
  background: linear-gradient(#fbbf24, #f97316) content-box,
              #fef3c7;
  padding: 20px;               /* ম্যাট */
  border: 12px solid #78350f;  /* কাঠের ফ্রেম */
  margin: 30px;                /* দেয়ালের ফাঁকা */
  color: #fff;
  font: 700 18px sans-serif;
}
p { margin: 0; }

৩ · মোট মাপের হিসাব — width আসলে কিসের width?

এখানেই নতুনরা সবচেয়ে বেশি অবাক হন। ধরুন একটি অনলাইন দোকানের পণ্য-কার্ডে লিখলেন width: 300px. স্বাভাবিকভাবে মনে হয় কার্ডটা 300px চওড়া হবে। কিন্তু সাথে padding: 20px আর border: 5px দিলে DevTools-এ মেপে দেখবেন কার্ডটা 350px! কারণ CSS-এর ডিফল্ট নিয়মে width মানে শুধু content-এর চওড়া। এই নিয়মের নাম box-sizing: content-box. নিচের ধাপগুলোতে হিসাবটা লাইন ধরে ধরে দেখুন:

1.card {2  width: 300px;3  padding: 20px;4  border: 5px solid #333;5  margin: 10px;7}

উচ্চতার হিসাবও একই: height + ওপর-নিচের padding + ওপর-নিচের border. তবে বাস্তবে উচ্চতা সাধারণত ঠিক করে দেওয়া হয় না — লেখা যত, বাক্স তত উঁচু হয়। লেখার পরিমাণ জানা না থাকলে (যেমন বাংলা অনুবাদে লেখা প্রায়ই লম্বা হয়) height ঠিক করে দিলে লেখা বাক্সের বাইরে উপচে পড়তে পারে। বাক্সের বাইরে উপচে পড়া লেখা সামলানোর property overflow, যা আসবে পর্ব ২৩-এ।

৪ · box-sizing: border-box — হিসাবের ঝামেলা থেকে মুক্তি

বাস্তব কাজে content-box-এর সবচেয়ে বড় সমস্যা দেখা দেয় শতাংশের সাথে। ধরুন একটি সার্চ বক্স বা কার্ডকে বলছেন “parent-এর পুরো চওড়া নাও” — width: 100% — আর ভেতরের লেখা কিনারা থেকে দূরে রাখতে দিলেন padding: 20px. তাহলে বাক্স হবে 100% যোগ 40px যোগ border — অর্থাৎ parent-এর চেয়ে চওড়া, ডান দিকে বেরিয়ে যাবে। নিচে দুটি একই রকম বাক্স, একটি মাত্র লাইনের পার্থক্য:

.wrap {
  width: 260px;
  border: 2px dashed #64748b;   /* parent-এর সীমানা */
  margin-bottom: 16px;
}
.box {
  width: 100%;
  padding: 20px;
  border: 4px solid #0369a1;
  background: #e0f2fe;
}
.bb { box-sizing: border-box; }

Universal reset — প্রায় প্রতিটি আধুনিক প্রজেক্টের প্রথম লাইন

প্রতিটি element-এ আলাদা করে box-sizing লেখার বদলে পেশাদাররা CSS ফাইলের একেবারে শুরুতে একবার লিখে দেন:

*,
*::before,
*::after {
  box-sizing: border-box;
}

এখানে * মানে “সব element”, আর ::before/::after হলো CSS দিয়ে তৈরি বাড়তি বাক্স, যাদের বলে pseudo-element (পর্ব ৩৪-এ বিস্তারিত)। এরা *-এর মধ্যে পড়ে না, তাই আলাদা করে লিখতে হয়। box-sizing নিজে থেকে parent থেকে child-এ উত্তরাধিকারে (inheritance) যায় না — তাই প্রতিটি element-কে সরাসরি বলতে হয়। কেউ কেউ একটু ভিন্ন রূপ ব্যবহার করেন: html { box-sizing: border-box; } আর *, *::before, *::after { box-sizing: inherit; } — এতে কোনো তৃতীয় পক্ষের উইজেট যদি content-box চায়, তার parent-এ একবার বদলালেই ভেতরের সবাই মেনে নেয়। দুটোই চলে; নতুন প্রজেক্টে প্রথমটিই যথেষ্ট সহজ।

এবার মাপগুলো চোখে না দেখে JavaScript দিয়ে মেপে দেখি। ব্রাউজার একই বাক্সের কয়েক রকম মাপ জানায় — কোনটি কী মাপে, সেটা জানলে DevTools বা JavaScript-এর সংখ্যা দেখে আর বিভ্রান্ত হবেন না:

// দুটি বাক্স: একই width, padding, border — শুধু box-sizing আলাদা
function measure() {
  document.querySelectorAll('.box').forEach(function (box) {
    const css = getComputedStyle(box);
    console.log(box.id + ' (' + css.boxSizing + ')');
    console.log('  computed width :', css.width);
    console.log('  offsetWidth    :', box.offsetWidth);
    console.log('  clientWidth    :', box.clientWidth);
    console.log('  rect.width     :', box.getBoundingClientRect().width);
  });
}
// ফ্রেমটি পাতায় বসে layout হওয়া পর্যন্ত অপেক্ষা, তারপর মাপা
(function wait() {
  document.body.offsetWidth ? measure() : setTimeout(wait, 50);
})();

৫ · Shorthand — ওপর থেকে ঘড়ির কাঁটার দিকে

margin আর padding-এর প্রতিটি দিকের আলাদা property আছে: margin-top, margin-right, margin-bottom, margin-left (padding-এরও একই চারটি)। কিন্তু চারটি লাইন লেখার বদলে এক লাইনে লেখা যায় — একে বলে shorthand property. মনে রাখার কৌশল: ওপর থেকে শুরু করে ঘড়ির কাঁটার দিকে — ওপর, ডান, নিচ, বাঁ। ইংরেজিতে অনেকে মনে রাখেন “TRouBLe” (Top, Right, Bottom, Left) শব্দটা দিয়ে।

একটি সতর্কতা: shorthand যে দিকগুলো আপনি উল্লেখ করেননি, সেগুলোও সেট করে দেয়। ধরুন আগে margin-top: 40px লিখেছেন, তার নিচে margin: 0 auto — তাহলে ওপরের 40px মুছে 0 হয়ে যাবে, কারণ দ্বিতীয় লাইনটিও চার দিকের মান দিয়েছে আর cascade-এ পরে লেখা নিয়ম জেতে। border-এর shorthand একটু আলাদা: border: 5px solid #333-এ পুরুত্ব, ধরন আর রং যেকোনো ক্রমে লেখা যায়, কিন্তু ধরন (solid) না লিখলে ডিফল্ট ধরন none — অর্থাৎ border দেখাই যাবে না! আর লেখার দিক অনুযায়ী বদলায় এমন “logical” রূপ — margin-inline, padding-block — আসবে পর্ব ৩৫-এ।

৬ · Margin collapsing — দুই margin মিলে এক

এবার box model-এর সবচেয়ে বিখ্যাত “অদ্ভুত” আচরণ। ধরুন একটি নোটিশ বোর্ডের পাতায় দুটি নোটিশ নিচে নিচে আছে। ওপরেরটার margin-bottom: 30px, নিচেরটার margin-top: 20px. দুটির মাঝে ফাঁক কত? হিসাব বলে 50px, কিন্তু ব্রাউজার দেখায় 30px. ওপর-নিচের দুটি margin গায়ে গায়ে লাগলে তারা মিশে একটি হয়ে যায়, আর বড়টাই টিকে থাকে। একে বলে margin collapsing.

সমস্যা হলো, এই নিয়ম মাঝে মাঝে এমন জায়গায় কাজ করে যেখানে আপনি আশা করেননি। নিচের ধাপগুলোতে collapsing-এর তিনটি রূপ আর যেসব অবস্থায় এটি হয় না, দেখুন (হলুদ ডোরাকাটা অংশ = ফাঁক):

এবার নিজে পরীক্ষা করুন। নিচের এডিটরে দুটি দৃশ্য আছে — পাশাপাশি দুই নোটিশ, আর একটি parent-এর ভেতরে child. একটি ছোট স্ক্রিপ্ট আসল ফাঁকগুলো মেপে নিচে লিখে দেবে:

<style>
  .note { background: #bae6fd; padding: 6px; }
  .a { margin-bottom: 30px; }
  .b { margin-top: 20px; }
  .parent { background: #fecdd3; }
  .child { margin-top: 24px; background: #bbf7d0; padding: 6px; }
</style>
<div class="note a">নোটিশ ক — margin-bottom: 30px</div>
<div class="note b">নোটিশ খ — margin-top: 20px</div>
<div class="parent">
  <div class="child">child — margin-top: 24px</div>
</div>
<script>
  const r = s => document.querySelector(s).getBoundingClientRect();
  (function wait() {   // layout শেষ না হওয়া পর্যন্ত অপেক্ষা
    if (!document.body.offsetWidth) return setTimeout(wait, 50);
    console.log('ক থেকে খ:', r('.b').top - r('.a').bottom, 'px');
    console.log('খ থেকে parent:', r('.parent').top - r('.b').bottom, 'px');
    console.log('parent থেকে child:', r('.child').top - r('.parent').top, 'px');
  })();
</script>

৭ · margin-এর আরও কৌশল — auto, negative আর min/max

auto margin — মাঝখানে বসানোর সহজ উপায়

একটি block বাক্সকে width বা max-width দিয়ে parent-এর চেয়ে সরু করলে বাক্সটা বাঁ দিকে বসে থাকে, ডানে ফাঁকা পড়ে থাকে। বাঁ আর ডান margin দুটিকেই auto দিলে ব্রাউজার বাকি জায়গাটা দুই পাশে সমান ভাগ করে দেয় — বাক্স মাঝখানে চলে আসে। এটাই auto margin. ব্লগের লেখা, নিউজ পোর্টালের কলাম, লগইন ফর্ম — প্রায় সবখানে এই একটি লাইন: margin: 0 auto.

দুটি শর্ত মনে রাখুন: বাক্সটি block হতে হবে, আর তার চওড়া parent-এর চেয়ে কম হতে হবে (width না দিলে block এমনিতেই পুরো চওড়া নেয়, ভাগ করার মতো জায়গাই থাকে না)। আর সাধারণ block লেআউটে ওপর-নিচের auto margin মানে 0 — তাই margin: auto দিয়ে কোনো বাক্সকে খাড়াখাড়ি মাঝখানে আনা যায় না। Flexbox আর Grid-এর ভেতরে অবশ্য auto margin চার দিকেই ফাঁকা জায়গা শুষে নেয় — সেই কৌশল পর্ব ২৬-এ।

min-width, max-width — নমনীয় কিন্তু সীমার ভেতরে

ফোন থেকে বড় মনিটর — পর্দার মাপ অনেক রকম। width: 700px দিলে ছোট ফোনে বাক্স পর্দা থেকে বেরিয়ে যাবে। এর বদলে max-width: 700px দিলে বাক্স জায়গা থাকলে 700px পর্যন্ত বড় হবে, কম জায়গায় নিজে থেকে সরু হবে। একইভাবে min-width বলে “এর চেয়ে সরু হবে না”, আর min-height/max-height উচ্চতার জন্য। এদের একসাথে বলে min/max size. দ্বন্দ্ব হলে নিয়ম: min-width জেতে max-width-এর ওপর, আর দুটোই জেতে width-এর ওপর। লেখার কলামের জন্য max-width খুব কাজের — খুব লম্বা লাইন পড়তে চোখ ক্লান্ত হয় (পর্ব ২১-এ বিস্তারিত)।

negative margin — ইচ্ছা করে কাছে টানা

margin ঋণাত্মক হতে পারে (padding পারে না)। Negative margin বাক্সকে সেই দিকে টেনে আনে, বা প্রতিবেশীকে নিজের ওপর টেনে নেয়। বাস্তব ব্যবহার: একটি কার্ডের ভেতরে padding আছে, কিন্তু ভেতরের একটি ব্যানার বা ছবিকে কার্ডের কিনারা থেকে কিনারা পর্যন্ত ছড়াতে চান। তখন ব্যানারে padding-এর সমান ঋণাত্মক margin দিন:

.page {
  max-width: 320px;
  margin: 0 auto;      /* বাঁ-ডান auto: মাঝখানে */
  padding: 1px 16px;
  background: #f1f5f9;
  border: 1px solid #94a3b8;
}
.banner {
  margin: 0 -16px;     /* padding পেরিয়ে দুই কিনারায় */
  padding: 8px 16px;
  background: #0f766e;
  color: #fff;
}

aspect-ratio — উচ্চতা আর চওড়ার অনুপাত

YouTube ভিডিওর ফ্রেম, পণ্যের বর্গাকার ছবি, প্রোফাইলের গোল ছবি — অনেক বাক্সের চওড়া পর্দা অনুযায়ী বদলায়, কিন্তু আকৃতির অনুপাত ঠিক থাকা চাই। aspect-ratio property ঠিক এই কাজটি করে: চওড়া জানা থাকলে উচ্চতা অনুপাত থেকে হিসাব হয়।

.video { width: 100%; aspect-ratio: 16 / 9; }
.product-photo { width: 100%; aspect-ratio: 1; object-fit: cover; }

aspect-ratio এখন Baseline Widely available. এর আগে একই কাজে “padding hack” ব্যবহার হতো — height: 0; padding-bottom: 56.25% — যা কাজ করত ঠিক সেই কারণে, যা আমরা অংশ ৩-এর “আরও গভীরে” বাক্সে দেখেছি: padding-এর শতাংশ চওড়া থেকে হিসাব হয় (9 ÷ 16 = 0.5625). পুরোনো কোডে এটি দেখলে চিনে নিন, নতুন কোডে aspect-ratio লিখুন। ছবির ক্ষেত্রে HTML-এ width আর height attribute দিলে ব্রাউজার নিজেই অনুপাতটি আগে থেকে জেনে জায়গা রেখে দেয়, ফলে layout shift কমে (পর্ব ৬)।

৮ · outline আর inline বাক্স — দুটি ব্যতিক্রমী আচরণ

outline — জায়গা না নেওয়া দাগ

দেখতে border-এর মতো, কিন্তু স্বভাবে একেবারে আলাদা। outline বাক্সের border-এর বাইরে আঁকা হয়, কিন্তু box model-এর অংশ নয় — কোনো জায়গা নেয় না, কাউকে সরায় না, দরকার হলে প্রতিবেশীর ওপরেই এঁকে ফেলে। এর আলাদা চার দিক নেই (চার দিকেই একই রকম), আর outline-offset দিয়ে বাক্স থেকে একটু দূরে আঁকা যায়। নিচে তিনটি সারিতে একই পণ্য-চিপ, শুধু মাঝখানের “ডাল”-এর সাজ আলাদা:

<style>
  .chip { display: inline-block; padding: 6px 10px; background: #e2e8f0; }
  .with-border  { border: 6px solid #2563eb; }
  .with-outline { outline: 6px solid #2563eb; outline-offset: 2px; }
</style>
<p><span class="chip">চাল</span><span class="chip">ডাল</span><span class="chip">তেল</span></p>
<p><span class="chip">চাল</span><span class="chip with-border">ডাল</span><span class="chip">তেল</span></p>
<p><span class="chip">চাল</span><span class="chip with-outline">ডাল</span><span class="chip">তেল</span></p>

inline বাক্সে padding আর margin — অর্ধেক কাজ করে

span, a, strong-এর মতো inline element লেখার লাইনের ভেতরে বসে। তাদের ক্ষেত্রে box model-এর নিয়ম একটু আলাদা: width আর height কাজই করে না; বাঁ-ডানের padding, border আর margin ঠিকঠাক জায়গা নেয়; কিন্তু ওপর-নিচের padding আর border শুধু আঁকা হয়, জায়গা নেয় না, আর ওপর-নিচের margin-এর কোনো প্রভাবই নেই। কারণ লাইনের উচ্চতা ঠিক করে line box — লেখার line-height — আর inline বাক্স সেই লাইনের ভেতরে লেখার মতোই বসে।

<style>
  p { width: 300px; line-height: 1.6; }
  .tag {
    background: #fde68a;
    padding: 12px 6px;
    margin: 30px 10px;
    border: 2px solid #b45309;
  }
</style>
<p>আগামীকাল সকাল দশটায় অফিসে একটি <span class="tag">জরুরি</span>
   মিটিং আছে। লাইনটা লম্বা করতে আরও কিছু লেখা দিলাম, যাতে
   ওপরে-নিচের লাইনের সাথে ব্যাজটির সম্পর্ক বোঝা যায়।</p>

৯ · AI-এর যুগে — box model-এর কাজ AI-কে দিলে কী দেখবেন

“একটা সুন্দর কার্ড বানিয়ে দাও” বললে AI কয়েক সেকেন্ডে CSS দিয়ে দেয়, আর বড় পর্দায় সেটা দেখতে ভালোও লাগে। সমস্যা ধরা পড়ে ফোনে খুললে, লেখা লম্বা হলে, বা কীবোর্ড দিয়ে চালালে। কারণ AI মাপগুলো “চোখের আন্দাজে” মেলায় — box model-এর হিসাব যাচাই করে না। আর ইন্টারনেটের পুরোনো কোড থেকে শেখা বলে পুরোনো অভ্যাসও নিয়ে আসে।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এ কার্ড Inspect করে box-model ছবির সংখ্যা মিলিয়েছি — AI-এর দেওয়া হিসাবের সাথে মিলেছে
• DevTools-এর device toolbar-এ 320px চওড়ায় দেখেছি — পাশে কোনো স্ক্রল নেই
• লেখা তিন গুণ লম্বা করে দেখেছি — কিছু উপচে পড়েনি, কাটা পড়েনি
• শুধু Tab চেপে পুরো কার্ডে ঘুরেছি — প্রতিটি বোতাম আর লিংকে focus দেখা গেছে
• অচেনা property বা কৌশল পেলে MDN-এ পড়েছি আর Can I use-এ সাপোর্ট দেখেছি; Lighthouse-এর অ্যাক্সেসিবিলিটি রিপোর্টও চালিয়েছি