CSS ඉගෙන ගමු: 3 වන පාඩම - Box Model නම් අරුමය! 📦✨

ආයුබෝවන් හැමෝටම! අදත් TechBlogLk එකේ CSS පාඩම් මාලාවේ අලුත් ලිපියකින් හම්බවෙන්න ආවේ. 😄

අද අපි කතා කරන්නේ CSS වල හදවත වගේ තියෙන Box Model කියන concept එක ගැන. Website එකක element එකක් කොච්චර ඉඩක් ගන්නවද, ඒක වටේ මොනවද තියෙන්න ඕන, ඒකෙ ප්‍රමාණය (size) එක හරියටම පාලනය කරන්නේ කොහොමද කියන එක හරියටම තේරුම් ගන්න මේ Box Model එක අනිවාර්යයෙන්ම දැනගෙන ඉන්න ඕන. මේක තේරුණා කියන්නේ ලස්සනට layout හදන එක හරිම පහසු වෙනවා! 💪

📦 CSS Box Model කියන්නේ මොකක්ද?

සරලවම කිව්වොත්, ඔයා HTML වලින් හදන හැම element එකක්ම (paragraph, heading, div, image etc.) CSS දකින විදිහට කොටුවක් (box) වගේ. මේ හැම box එකකම ප්‍රධාන ස්ථර (layers) 4ක් තියෙනවා:

1. Content (අන්තර්ගතය): Box එක ඇතුළෙ තියෙන නියම දේවල් - Text, Images, Videos වගේ දේවල්. 📝
2. Padding (ඇතුළත හිස්තැන): Content එක වටේට, Border එකට කලින් තියෙන හිස් ඉඩ. 🧻
3. Border (මායිම): Padding එක වටේ තියෙන රාමුව හෝ මායිම් රේඛාව. 🧱
4. Margin (පිටත හිස්තැන): Border එකටත් එළියෙන්, අනිත් elements වලින් මේ box එක වෙන් කරලා තියන හිස් ඉඩ. 🌌

📊 Box Model එක හිතින් මවාගමු:

හරියට ලූණු ගෙඩියක් වගේ හිතන්න. මැද තියෙන්නේ Content එක. ඒක වටේ තියෙනවා Padding තට්ටුවක්. ඒක වටේ තියෙනවා Border එක. අන්තිමටම එළියෙන් තියෙනවා Margin එක, ඒකෙන් තමයි අනිත් ලූණු ගෙඩි වලින් (අනිත් elements වලින්) ඈත් වෙලා ඉන්නේ.

මෙන්න පොඩි දළ සටහනක්:

+-----------------------------------+  <-- Margin (එළියෙ ඉඩ)
|   +---------------------------+   |
|   |       Border (රාමුව)       |   |
|   |   +-------------------+   |   |
|   |   |   Padding (ඇතුළෙ ඉඩ)|   |   |
|   |   |   📝 Content එක   |   |   |
|   |   |                   |   |   |
|   |   +-------------------+   |   |
|   +---------------------------+   |
+-----------------------------------+

🔧 අදාළ CSS Properties සහ Code උදාහරණයක්:

Box Model එකේ මේ layers පාලනය කරන්න පාවිච්චි කරන CSS properties ටික බලමු:

CSS

.my-box {
  width: 250px;      /* Content එකේ පළල */
  height: 150px;     /* Content එකේ උස */
  padding: 25px;     /* Content එක වටේ ඇතුළතින් 25px ඉඩක් */
  border: 5px solid red; /* 5px ඝනකම, තනි රේඛාවක්, රතු පාට border එකක් */
  margin: 20px;      /* Box එක වටේ පිටතින් 20px ඉඩක් */
}

• width / height: මේකෙන් Content area එකේ ප්‍රමාණය තමයි define වෙන්නේ (සාමාන්‍යයෙන්). 📏
• padding: Content එකයි Border එකයි අතර ඇතුළත හිස් ඉඩ. 🧻
• border: Padding එක වටේ තියෙන මායිම. 🧱
• margin: මුළු Box එකම වටේට තියෙන, අනිත් elements වලින් වෙන් කරන පිටත හිස් ඉඩ. 😎

💡 වැදගත්ම Tip එක: box-sizing Property එක

Default විදිහට (box-sizing: content-box;), ඔයා දෙන width සහ height අදාළ වෙන්නේ Content එකට විතරයි. Padding සහ Border එකතු වුණාම මුළු box එකේ ඇත්ත පළල/උස ඔයා define කරපු ගාණට වඩා වැඩි වෙනවා.

නමුත්, නූතන web design වලදී ගොඩක් වෙලාවට පාවිච්චි කරන හොඳම practice එකක් තමයි box-sizing: border-box; පාවිච්චි කරන එක.

CSS

.my-box {
  box-sizing: border-box;
  /* දැන් width (250px) එකට ඇතුළෙමයි padding (25px + 25px) සහ border (5px + 5px) අන්තර්ගත වෙන්නේ.
     Content එකේ පළල ඒ අනුව අඩු වෙනවා. මුළු පළල 250px ම තමයි. */
}

මේකෙන් වෙන්නේ ඔයා දෙන width සහ height අගයන් ඇතුළටම Padding සහ Border එකත් එකතු කරලා දෙන එක. එතකොට element එකක මුළු ඉඩ ගණනය කරන එක හරිම ලේසියි. Layouts හදද්දී මේක මාරම වැදගත්! ✅

📝 කෙටි සාරාංශයක් (Summary):

Padding - Content වටේ ඇතුළත හිස් ඉඩ

paddingBorder - Padding වටේ තියෙන මායිම

borderMarginBorder - එක වටේ පිටත හිස් ඉඩ

marginbox-sizing - පළල/උස ගණනය කරන විදිහ

🧪 දැන් Practice කරලා බලමු!

මේ HTML කෝඩ් එක දාලා, අර උඩ CSS එක (.my-box) apply කරලා බලන්න.

HTML

<div class="my-box">
  මේක CSS Box Model එකට උදාහරණයක්! 😄
</div>

Browser එකේ "Inspect Element" (Right Click -> Inspect) කරලා බලන්න මේ Padding, Border, Margin කොහොමද පේන්නේ, කොච්චර ඉඩක් ගන්නවද කියලා. අගයන් වෙනස් කර කර බලන්න! 😍

🤔 Box Model එක වැදගත් ඇයි? සහ ඊළඟට මොකක්ද?

Web page එකක elements එකිනෙකට සාපේක්ෂව ස්ථානගත කරන හැටි (Layout), ඒවා අතර පරතරය තීරණය කරන හැටි, ඒවායේ ප්‍රමාණය පාලනය කරන හැටි තේරුම් ගන්න Box Model එක හරියටම දැනගන්න ඕන. මේක හරියට ගෙයක් හදන්න කලින් අත්තිවාරම දානවා වගේ වැඩක්. 📐😎

ඊළඟ පාඩමෙන් අපි කතා කරමු CSS Display & Positioning ගැන. අද ඉගෙන ගත්ත මේ box එක 'block' එකක් විදිහටද, 'inline' එකක් විදිහටද හැසිරෙන්නේ? ඒක තැනින් තැනට ගෙනියන්නේ කොහොමද? කියන සුපිරි බලතල ටික ගැන තමයි එදාට කතා කරන්නේ. 🔥

💬 ඔයාලගේ අදහස් සහ Support එක!

මේ පාඩම ගැන ඔයාලට හිතෙන දේ, ප්‍රශ්න තියෙනවනම් අනිවාර්යෙන් Comment එකක් දාන්න. මේ වගේ ලිපි තව ලියන්න ඔයාලගෙන් ලැබෙන පොඩි Like එකක්, Comment එකක් ලොකු Motivation එකක්! ❤️💪✨

ඊළඟ පාඩමෙන් හමුවෙමු! සුභ දවසක්! 💻📦