The Box Model

8. Practice Problems

Every problem has a Show Answer button with real, runnable HTML+CSS. Try it yourself first, then check.

1. Create a <div> with 10px padding, a 2px solid black border, and 20px margin. Describe how big the total box is if the content is 100px wide (content-box default).
   10px padding, 2px solid কালো border, এবং 20px margin সহ একটি <div> বানান। content 100px চওড়া হলে (content-box ডিফল্টে) মোট বাক্সের আকার কত হবে তা লিখুন।
   ✨ Show Answer (উত্তর দেখুন)

   ans1.html

   <div class="box">100px content</div>

   style.css

   .box {
     width: 100px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }

   Run Copy

   Answer: The visible border-to-border box is 124px wide (100 content + 10+10 padding + 2+2 border). Margin (20px each side) is outside that and doesn't count toward the box's own size — it only pushes neighboring elements away.

   দৃশ্যমান border-থেকে-border বাক্সের প্রস্থ হবে 124px (100 content + 10+10 padding + 2+2 border)। Margin (প্রতি পাশে 20px) এর বাইরে থাকে এবং বাক্সের নিজের আকারের মধ্যে গণনা হয় না — এটি শুধু পাশের এলিমেন্টকে দূরে ঠেলে দেয়।

2. Add box-sizing: border-box to the previous box and set width to exactly 100px. What is the new content width?
   আগের বাক্সে box-sizing: border-box যোগ করুন এবং width ঠিক 100px সেট করুন। এখন নতুন content width কত হবে?
   ✨ Show Answer (উত্তর দেখুন)

   ans2.html

   <div class="box">border-box demo</div>

   style.css

   .box {
     box-sizing: border-box;
     width: 100px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }

   Run Copy

   Answer: The content area shrinks to 76px (100 total − 10−10 padding − 2−2 border), so the outer box (border-to-border) stays exactly 100px wide.

   Content এলাকা 76px-এ সংকুচিত হয় (100 মোট − 10−10 padding − 2−2 border), ফলে বাইরের বাক্স (border-থেকে-border) ঠিক 100px প্রস্থ থাকে।

3. Two stacked <p> elements have margin: 20px 0; on both. How many pixels of gap appear between them, and why?
   দুটি স্ট্যাক করা <p> এলিমেন্টের উভয়েই margin: 20px 0; আছে। তাদের মাঝে কত পিক্সেল ফাঁকা জায়গা দেখা যাবে, এবং কেন?
   ✨ Show Answer (উত্তর দেখুন)

   Answer: 20px, not 40px. The bottom margin of the first paragraph and the top margin of the second collapse into a single margin equal to the larger of the two — since both are 20px, the result is 20px.

   40px নয়, 20px। প্রথম paragraph-এর bottom margin এবং দ্বিতীয়টির top margin একত্রে collapse করে দুটির মধ্যে বড়টির সমান একটি margin-এ পরিণত হয় — যেহেতু দুটোই 20px, ফলাফল 20px।

4. Write CSS turning a <span> into an inline-block element sized 80px by 80px with a background color.
   এমন CSS লিখুন যা একটি <span>-কে 80px বাই 80px আকারের একটি ব্যাকগ্রাউন্ড-কালারযুক্ত inline-block এলিমেন্টে পরিণত করে।
   ✨ Show Answer (উত্তর দেখুন)

   ans4.html

   Text before <span class="swatch"></span> text after.

   style.css

   .swatch {
     display: inline-block;
     width: 80px;
     height: 80px;
     background: #39b549;
     vertical-align: middle;
   }

   Run Copy
5. In one paragraph, explain why setting width and height on a plain <span> (display: inline) has no visible effect.
   একটি অনুচ্ছেদে ব্যাখ্যা করুন, একটি সাধারণ <span>-এ (display: inline) width ও height সেট করলে কেন কোনো দৃশ্যমান প্রভাব পড়ে না।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: Inline elements are designed to flow within a line of text alongside other inline content, so the box model treats their size as determined purely by their content. The browser intentionally ignores width, height, and vertical margin on inline boxes to keep text flow predictable; to make sizing work, the element needs display: inline-block or display: block instead.

   Inline এলিমেন্ট অন্যান্য inline কনটেন্টের পাশাপাশি টেক্সটের লাইনে প্রবাহিত হওয়ার জন্য ডিজাইন করা, তাই বক্স মডেল তাদের আকার শুধু কনটেন্ট দ্বারা নির্ধারিত ধরে নেয়। টেক্সট ফ্লো predictable রাখতে ব্রাউজার ইচ্ছাকৃতভাবে inline বাক্সে width, height ও vertical margin উপেক্ষা করে; আকার কাজ করাতে হলে display: inline-block বা display: block ব্যবহার করতে হবে।