বক্স মডেলের সাথে সম্পর্কিত CSS প্রোপার্টিসমূহ

Articles

এই প্রবন্ধে বক্স মডেলের সাথে সম্পর্কিত CSS বৈশিষ্ট্যগুলো ব্যাখ্যা করা হয়েছে।

আপনি প্রস্থ, উচ্চতা এবং মার্জিন এর মত বৈশিষ্ট্যগুলোর ব্যবহার এবং সিনট্যাক্স সম্পর্কে জানতে পারবেন।

YouTube Video

প্রিভিউর জন্য HTML

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

বক্স মডেল সম্পর্কিত

`width` এবং `height` প্রোপার্টিগুলি

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

width এবং height বৈশিষ্ট্যগুলি একটি উপাদানের প্রস্থ এবং উচ্চতা নির্ধারণ করতে ব্যবহৃত CSS বৈশিষ্ট্য। এগুলি বিশেষত ব্লক উপাদান, চিত্র, ভিডিও ইত্যাদির আকার নির্ধারণ করতে ব্যবহৃত হয়।

width-height-fixed শ্রেণীতে, প্রস্থ এবং উচ্চতার জন্য স্থির মান নির্ধারণ করা হয়।
width-height-percent শ্রেণীতে, প্রস্থ এবং উচ্চতার জন্য শতাংশ মান নির্ধারণ করা হয়।

যে মানগুলি নির্দিষ্ট করা যেতে পারে

width এবং height বৈশিষ্ট্যগুলির নিচের মান থাকতে পারে।

auto: ডিফল্ট আকার। মাতৃ উপাদানের সাথে সম্পর্কযুক্ত আকার স্বয়ংক্রিয়ভাবে সামঞ্জস্য করে।
স্থির মান: পিক্সেল, শতাংশ বা আপেক্ষিক এককে স্থির প্রস্থ নির্ধারণ করে।(ex: 100px, 50%, 10rem)
- উদাহরণস্বরূপ, 250px উপাদানটির আকার 250 পিক্সেলে নির্ধারণ করে, এবং 50% এটি মাতৃ উপাদানের আকারের 50% নির্ধারণ করে।
min-content: উপাদানের ন্যূনতম আকারে ফিট করে।
max-content: উপাদানের সর্বোচ্চ আকারে ফিট করে।
fit-content: উপাদানের আকারকে সামঞ্জস্য করে বিষয়বস্তুর আকারের উপর ভিত্তি করে।

সর্বনিম্ন এবং সর্বাধিক মান নির্দিষ্ট করা

min-width, max-width, min-height, এবং max-height হল CSS বৈশিষ্ট্য যা একটি উপাদানের প্রস্থ এবং উচ্চতার সীমাবদ্ধতা নির্ধারণে ব্যবহৃত হয়। এগুলি ব্যবহার করে আপনি নিশ্চিত করতে পারেন যে একটি উপাদান নির্দিষ্ট আকারের সীমার মধ্যে থাকে।

`margin` এবং `padding` প্রোপার্টিগুলি

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

margin এবং padding হল CSS-এ ব্যবহৃত বৈশিষ্ট্য যা বক্স মডেলের মধ্যে উপাদানগুলির বাহ্যিক এবং অভ্যন্তরীণ ব্যবধান নিয়ন্ত্রণ করে। এগুলি উপাদানগুলির মধ্যে ব্যবধান সামঞ্জস্য করতে এবং চেহারা পরিপাটি করতে ব্যবহৃত হয়।

margin-padding শ্রেণীতে উভয় margin এবং padding নির্ধারণ করা হয়েছে। কঠিন বর্ডারের বাইরে margin এবং কঠিন বর্ডারের ভিতরে padding সংক্রান্ত ব্যবধান থাকে।
margin-only শ্রেণীতে শুধুমাত্র margin নির্ধারণ করা হয়েছে। আপনি দেখতে পাবেন যে margin-padding শ্রেণীর তুলনায় নীল ক্ষেত্রটি ছোট কারণ কঠিন বর্ডারের ভিতরে কোনো padding নেই।
no-margin শ্রেণীতে, উভয় margin এবং padding এর মান 0 করা হয়েছে। আপনি দেখতে পাবেন যে নীল ক্ষেত্রটি সম্পূর্ণভাবে বাম দিকে ঠেলে দেওয়া হয়েছে কারণ শক্ত বর্ডারের বাইরে কোনো margin স্পেস নেই।

এইভাবে, margin প্রপার্টি একটি উপাদানের বাইরের স্থান নির্ধারণ করে, যা উপাদানগুলির মধ্যে দূরত্ব সামঞ্জস্য করে। অন্যদিকে, padding প্রপার্টি একটি উপাদানের ভেতরের স্থান নির্ধারণ করে, যা বিষয়বস্তু এবং সীমানার মধ্যে দূরত্ব সামঞ্জস্য করে।

`margin` প্রোপার্টি

margin প্রপার্টি একটি উপাদানের বাইরের স্থান (margin) নির্ধারণ করে। এটি পার্শ্ববর্তী উপাদানগুলির মধ্যে স্থান তৈরি করতে ব্যবহৃত হয়। নিম্নলিখিত মান নির্ধারণ করা যেতে পারে:।
নির্দিষ্ট মান: আপনি পিক্সেল, আপেক্ষিক ইউনিট (em, rem), বা শতাংশে মার্জিনের আকার নির্ধারণ করতে পারেন।(ex: 10px, 1em, 5%)
auto: ব্লক উপাদানগুলিকে কেন্দ্রীভূত করার জন্য উপযোগী। প্রস্থ নির্ধারিত হলে, এটি স্বয়ংক্রিয়ভাবে বাম ও ডান মার্জিন সামঞ্জস্য করে।
ইতিবাচক এবং নেতিবাচক মান: ইতিবাচক মান স্থান বৃদ্ধি করে, যখন নেতিবাচক মান উপাদানগুলিকে কাছাকাছি আনে।

সংক্ষিপ্ত নোটেশন:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

margin প্রপার্টি এক থেকে চারটি মান গ্রহণ করতে পারে।

একটি মান: সব দিকেই প্রয়োগ হয়।
দুটি মান: প্রথমটি উপরে এবং নিচে প্রয়োগ হয়, দ্বিতীয়টি বাম এবং ডানে।
তিনটি মান: উপরে, বাম ও ডান, এবং নিচে এই ক্রমে প্রয়োগ হয়।
চারটি মান: উপরে, ডান, নিচে এবং বাম এই ক্রমে প্রয়োগ হয়।

`padding` প্রপার্টি

কার্যবিধি:

padding প্রপার্টি একটি উপাদানের ভেতরের স্থান (padding) নির্ধারণ করে। এটি একটি উপাদানের বিষয়বস্তু এবং সীমানার মধ্যে স্থান তৈরি করতে ব্যবহৃত হয়। নিম্নলিখিত মান নির্ধারণ করা যেতে পারে:।
নির্দিষ্ট মান: প্যাডিংয়ের আকার নির্ধারণ করে।(ex: 10px, 1em, 5%)
নেতিবাচক মান ব্যবহার করা যাবে না। প্যাডিংয়ের মান কেবল ইতিবাচক সংখ্যার মধ্যেই নির্ধারণ করা যেতে পারে।

সংক্ষিপ্ত নোটেশন:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

margin এর মতো, আপনি এক থেকে চারটি মান নির্ধারণ করতে পারেন।

একটি মান: সব দিকেই প্রয়োগ হয়।
দুটি মান: প্রথমটি উপরে এবং নিচে প্রয়োগ হয়, দ্বিতীয়টি বাম এবং ডানে।
তিনটি মান: উপরে, বাম ও ডান, এবং নিচে এই ক্রমে প্রয়োগ হয়।
চারটি মান: উপরে, ডান, নিচে এবং বাম এই ক্রমে প্রয়োগ হয়।

`box-sizing` প্রপার্টি

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing একটি CSS প্রপার্টি যা একটি উপাদানের প্রস্থ এবং উচ্চতা কীভাবে গণনা করা হয় তা নিয়ন্ত্রণ করে।

content-box ক্লাসে, উপাদানের প্রস্থ 360px। width 300px, যেখানে বাম ও ডান padding মোট 40px এবং বাম ও ডান border মোট 20px, যার মোট যোগফল 360px।
border-box এ, উপাদানের প্রস্থ 300px। নির্ধারিত width এর মধ্যে padding এবং border অন্তর্ভুক্ত করা হয়।

`box-sizing` এর মান

box-sizing এর মূলত দুটি মান রয়েছে: content-box এবং border-box, যার মধ্যে content-box ডিফল্ট মান।

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

content-box নির্ধারণ করা হলে, কেবল কনটেন্ট প্রস্থ এবং উচ্চতাই width এবং height দ্বারা সেট করা হয়। চূড়ান্ত আকার নির্ধারণ করতে এতে padding এবং border যোগ করা হয়। অন্য কথায়, width এবং height শুধুমাত্র কনটেন্ট এরিয়াকে বোঝায়।

এই উদাহরণে, নির্ধারিত width হল 200px, কিন্তু বাঁ এবং ডান দিকের padding এবং border যোগ করে উপাদানের চূড়ান্ত প্রকৃত প্রস্থ হয় 260px।

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

border-box নির্ধারণ করা হলে, width এবং height গণনা করা হয়, যেখানে padding এবং border অন্তর্ভুক্ত থাকে। অন্য কথায়, নির্ধারিত width এবং height কনটেন্ট, padding এবং border এর মোট আকার হয়ে যায়।

এই ক্ষেত্রে, নির্ধারিত width হল 200px, এবং যেহেতু padding এবং border অন্তর্ভুক্ত আছে, উপাদানের চূড়ান্ত প্রকৃত প্রস্থ 200px থাকে। এর মধ্যে padding এবং border সমন্বয় করা হয়।

`box-sizing` এর পার্থক্যগুলির সারসংক্ষেপ

প্রোপার্টি	গণনার পদ্ধতি	প্রকৃত প্রস্থের গণনা
`content-box` (ডিফল্ট)	`width` শুধুমাত্র বিষয়বস্তু নির্দেশ করে। `padding` এবং `border` যোগ করা হয়েছে।	`width` + `padding` + `border`
`border-box`	`width` সবকিছু (বিষয়বস্তু, `padding`, `border` অন্তর্ভুক্ত)	নির্দিষ্ট `width` যথারীতি ব্যবহৃত হয়।

`box-sizing` এর সুবিধাগুলি

border-box ব্যবহার লেআউট স্থিতিশীল করে। padding বা border যোগ করলেও নির্ধারিত আকার পরিবর্তন হয় না, যা গণনাকে সহজ করে।
এটি নমনীয় লেআউট তৈরির সময় উপকারী। রেসপন্সিভ ডিজাইন বা জটিল লেআউটের ক্ষেত্রে, অপ্রত্যাশিত আকার পরিবর্তন এড়াতে border-box প্রায়ই ব্যবহৃত হয়।

`border-box` বিশ্বব্যাপী প্রয়োগ করার পদ্ধতি

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

এইভাবে CSS সেট করে, আপনি অপ্রত্যাশিত আকার পরিবর্তন এড়াতে সব উপাদানে border-box প্রয়োগ করতে পারেন।

সারসংক্ষেপ

box-sizing নিয়ন্ত্রণ করে যে padding এবং border কোনো উপাদানের width এবং height এর মধ্যে অন্তর্ভুক্ত হবে কি না।
border-box ব্যবহার আকারের গণনাকে সহজ করে এবং এটি রেসপন্সিভ ডিজাইনের জন্য উপযুক্ত।

`visibility` প্রোপার্টি

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

visibility প্রপার্টি উপাদানগুলো দেখানো বা লুকানোর জন্য ব্যবহৃত হয়, তবে display প্রপার্টির থেকে ভিন্নভাবে, এটি উপাদান লুকানো থাকলেও লেআউটকে প্রভাবিত করে। এটি কেবল উপাদানটি লুকিয়ে রাখে, এর আসল অবস্থান এবং আকার ধরে রেখে, অন্য উপাদানের লেআউট প্রভাবিত না করেই।

মূল সিনট্যাক্স

1element {
2    visibility: value;
3}

value: একটি মান যা উপাদানের দৃশ্যমানতা নির্ধারণ করে।

মানের ধরন

visibility প্রপার্টি নিম্নলিখিত মানগুলিতে সেট করা যেতে পারে:।

`visible`

visible নির্ধারণ করলে উপাদানটি প্রদর্শিত হবে। এটি ডিফল্ট মান।

`hidden`

hidden নির্ধারণ করলে উপাদানটি লুকানো হবে, তবে এর লেআউট স্থান ধরে থাকবে।

`collapse`

টেবিলের সারি বা কলামের জন্য মূলত collapse ব্যবহৃত হয়। উপাদানটি অদৃশ্য হয়ে যায় এবং এর স্থানও উপেক্ষা করা হয়। যখন এটি টেবিলের সারি বা কলামে প্রয়োগ করা হয়, লুকানো সারি বা কলামগুলি সম্পূর্ণভাবে লেআউট থেকে সরিয়ে দেওয়া হয়।
যাহোক, যখন এটি সাধারণ ব্লক বা ইনলাইন উপাদানে ব্যবহার করা হয়, টেবিল উপাদান ব্যতীত, এটি hidden এর মতো আচরণ করে এবং লেআউটের স্থান সংরক্ষিত থাকে।

`inherit`

inherit নির্ধারণ করলে এটি অভিভাবক উপাদান থেকে visibility প্রোপার্টির মান উত্তরাধিকারসূত্রে গ্রহণ করবে।

`visibility` এবং `display` এর মধ্যে পার্থক্যগুলি

visibility এবং display এর মধ্যে নিম্নলিখিত পার্থক্যগুলি রয়েছে।

visibility: hidden উপাদানটিকে লুকিয়ে রাখে কিন্তু এর স্থান এবং লেআউট সংরক্ষিত রাখে।
display: none উপাদানটি লেআউট থেকে সম্পূর্ণভাবে সরিয়ে দেয়, যা অন্য উপাদানগুলোকে সেই স্থান পূরণ করতে দেয়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

কোড প্রদর্শন এবং উদ্ধৃতির জন্য CSS বৈশিষ্ট্য ব্যাকগ্রাউন্ড-সংক্রান্ত CSS প্রপার্টি

বক্স মডেলের সাথে সম্পর্কিত CSS প্রোপার্টিসমূহ

YouTube Video

প্রিভিউর জন্য HTML

বক্স মডেল সম্পর্কিত

width এবং height প্রোপার্টিগুলি

যে মানগুলি নির্দিষ্ট করা যেতে পারে

সর্বনিম্ন এবং সর্বাধিক মান নির্দিষ্ট করা

margin এবং padding প্রোপার্টিগুলি

margin প্রোপার্টি

সংক্ষিপ্ত নোটেশন:

padding প্রপার্টি

কার্যবিধি:

সংক্ষিপ্ত নোটেশন:

box-sizing প্রপার্টি

box-sizing এর মান

content-box

border-box

box-sizing এর পার্থক্যগুলির সারসংক্ষেপ

box-sizing এর সুবিধাগুলি

border-box বিশ্বব্যাপী প্রয়োগ করার পদ্ধতি

সারসংক্ষেপ

visibility প্রোপার্টি

মূল সিনট্যাক্স

মানের ধরন

visible

hidden

collapse

inherit

visibility এবং display এর মধ্যে পার্থক্যগুলি

YouTube Video

`width` এবং `height` প্রোপার্টিগুলি

`margin` এবং `padding` প্রোপার্টিগুলি

`margin` প্রোপার্টি

`padding` প্রপার্টি

`box-sizing` প্রপার্টি

`box-sizing` এর মান

`content-box`

`border-box`

`box-sizing` এর পার্থক্যগুলির সারসংক্ষেপ

`box-sizing` এর সুবিধাগুলি

`border-box` বিশ্বব্যাপী প্রয়োগ করার পদ্ধতি

`visibility` প্রোপার্টি

`visible`

`hidden`

`collapse`

`inherit`

`visibility` এবং `display` এর মধ্যে পার্থক্যগুলি