css_11

CSS Box Model

HTML မွာ ေရးတဲ့ Elements ေတြအားလံုးကို သတၱာ တစ္ခုအေနနဲ႔ သတ္မွတ္ႏိုင္ပါတယ္၊ ဥပမာ သင္က <h1> how are you doing </h1> ဆိုျပီး ေရးထားတယ္၊ ဒါဆိုရင္ အဲ့ဒီ့ စာေၾကာင္းက h1 element နဲ႔ တည္ေဆာက္ထားတဲ့စာေၾကာင္း၊ သင့္၀က္ဆိုက္မွာေပၚမွာက how are you doing ဆိုတဲ့စာသားကို စာလံုးအၾကီးနဲ႔ ေပၚမယ္၊ ေဘးမွာလဲ ဘာမွမပါဘူး၊ အေပၚမွာလဲ ဘာမွမပါဘူး၊ ဒါေပမယ့္ ဒီဇိုင္နာတစ္ေယာက္ သိထားရမွာက အဲ့ဒီ့ how are you doing ဆိုတဲ့ စာသားရဲ့ ညာဘက္ ဘယ္ဘက္ အေပၚ နဲ႔ ေအာက္တို႔မွာ padding,border နဲ႔ Margin တို႔ရွိတယ္၊ အဲ့ဒီ့ padding , border နဲ႔ Margin တို႔ကို သင့္စိတ္ၾကိဳက္ ျပဳျပင္ ေျပာင္းလဲလိုက္လို႔ရတယ္၊ ေအာက္မွာ သရုပ္ျပပံုကိုၾကည့္

သာမာန္အျမင္

အထက္က ပံုစံကေတာ့ <h1> how are you doing </h1> ဆိုတဲ့ Element ကို တကယ့္ ၀က္ဆိုက္မွာျမင္ရမယ့္အျမင္ပါ၊ ဒါေပမယ့္ ဒီဇိုင္နာ တစ္ေယာက္အေနနဲ႔ ျမင္ရမယ့္ပံုက သူ႔ရဲ့ေဘးမွာ padding ရွီတယ္၊ border ရွိတယ္ Margin ရွိတယ္လို႔ျမင္ထားရမယ္၊ အဲ့ဒီ့ padding, border, Margin တို႔ကိုလဲ လိုသလို ျပဳျပင္ေျပာင္းလဲ လို႔ရပါတယ္၊ ေအာက္မွာ ဒီဇိုင္နာ တစ္ေယာက္ Element တိုင္းကိုျမင္ သင့္တဲ့ပံုစံကို <h1> how are you doing </h1> သံုးျပီးဥပမာ ျပထားတယ္၊

အထက္က ပံုကေတာ့ ဒီဇိုင္နာတစ္ေယာက္ Element တစ္ခုကိုျမင္သင့္တဲ့အျမင္ကို ဥပမာ ျပထားတာပါ၊ Element တိုင္းရဲ့  ဘယ္, ညာ, အေပၚ, ေအာက္ တို႔မွာ padding ရွိပါတယ္၊ အထက္က ပံုမွာေတာ့ Padding လို႔ေရးထားတဲ့ အျဖဴေရာင္အစိတ္အပိုင္းက Padding ရဲ့ပိုင္နက္ပါ၊ အဲ့ဒီ့ Padding ကိုေတာ့ Border နဲ႔ ၀ိုင္းထားတယ္၊ အထက္က ပံုမွာ Border လို႔ေရးထားတဲ့ အစိမ္းရင့္ေရာင္ ေနရာကေတာ့ Border ပိုင္ဆိုင္တဲ့အစိတ္အပိုင္းပါ၊ Border ကိုေတာ့ Margin နဲ႔ ၀ိုင္းထားတယ္၊ Margin လို႔ေရးထားတဲ့ အျဖဴေရာင္အစိတ္အပိုင္းပါ၊  ဒီေတာ့ ေသခ်ာေလ့လာၾကည့္ရင္ Element တိုင္းမွာ padding ရွိမယ္၊ border ရွိမယ္၊ Margin ရွိမယ္၊ အထက္က ဥပမာလိုပဲ ၊ အထက္က ဥပမာက နားလည္ေစခ်င္လို႔ျပထားတာ၊ ဒါေပမယ့္ တကယ္ေတာ့ အဲ့ဒါမ်ိဳးေပၚေနမွာမဟုတ္ဘူး၊ သင့္၀က္ဆိုက္မွာေပၚေနမွာက how are you doing ဆိုတဲ့စာလံုးပဲေပၚမွာ၊ အဲ့ဒီ့စာလံုးကိုမွ သင္က စိတ္ထဲက အလိုလို padding, border နဲ႔ Margin တို႔ပါတယ္လို႔သိေနရမွာ၊ ဒီလို Element  တစ္ခုကို Padding, Border, Margin တို႔နဲ႔ ၀ိုင္းထားတာကို CSS Box Model လုိ႔ေခၚတယ္၊ အဲ့ဒီ့ Box Model မွာပါ၀င္တဲ့ padding, border နဲ႔ Margin တို႔ကို CSS သံုးျပီး ျပဳျပင္ႏိုင္တယ္၊ ေနရာ ပိုယူသြားေအာင္ ေပ်ာက္သြားေအာင္ အေရာင္ေျပာင္းသြားေအာင္ စသျဖင့္ CSS သံုးျပီးမ်ိဳးစံုျပဳျပင္လို႔ရတယ္၊

CSS သံုးျပီး Element တစ္ခုမွာပါတဲ့ Padding, Border, Margin တို႔ကို ျပဳျပင္ေျပာင္းလဲခ်င္တယ္ဆိုရင္ေတာ့ အဲ့ဒီ့ Element ယူထားတဲ့ ေနရာ အက်ယ္ အ၀င္းကို အတိအက်သိဖို႔လိုတယ္၊ ဒါမွ အဲ့ဒီ့ ေနရာအက်ယ္ကို အေျခခံပီး လိုသလိုျပဳျပင္ေျပာင္းလဲႏိုင္မွာ၊ ဆိုၾကပါစို႔ သင္က <h1> how are you doing </h1> ဆိုတဲ့ Element ရဲ့ အက်ယ္ width ကို 300px ထားမယ္ ဆိုရင္
စာသားရဲ့ အက်ယ္ကို 250px , padding ရဲ့ အက်ယ္ကို 10px, border ရဲ့ အက်ယ္ကို 5px, Margin ရဲ့ အက်ယ္ကို 10px ထားလိုက္ႏိုင္တယ္၊ ဒါဆိုရင္ အားလံုးေပါင္း 300px ျဖစ္သြားမယ္၊ အေၾကာင္းက padding ရဲ့ အက်ယ္ 10px ဆိုတာ ညာဘက္ ကို 10px ဘယ္ဘက္ကို 10px အေပၚကို 10px နဲ႔ ေအာက္ကို 10px ထည့္တဲ့သေဘာ၊ ဒီေတာ့ ညာ နဲ႔ ဘယ္က width မွာပါမယ္၊ အေပၚနဲ႔ ေအာက္က height မွာပါမယ္၊ အခုက element ရဲ့ width ကိုတြက္မွာျဖစ္တဲ့အတြက္ ညာနဲ႔ ဘယ္ကို ထည့္တြက္မယ္၊ ညာ က 10px ဘယ္က 10px ဆိုေတာ့ ေပါင္းလိုက္ရင္ Padding ယူထားတဲ့ width က 20px, အဲ့ဒီ့လိုပဲ ညာ ေကာ ဘယ္မွာပါ border ယူထားတဲ့ အက်ယ္က 5px စီ ႏွစ္ဖက္ ဆိုေတာ့ 10px, ဒီလိုပဲ Margin 10px က ႏွစ္ဖက္ဆိုေတာ့ 20px, အားလံုးကိုေပါင္းရင္ 300px ျဖစ္သြားမယ္၊ ဒါကေတာ့ h1 element ရဲ့ အက်ယ္ပါ၊

250px (စာသား content ရဲ့ အက်ယ္)
+ 20px (တစ္ဖက္ကို 10px စီနဲ႔ ဘယ္ညာႏွစ္ဖက္ေပါင္း Padding 20px)
+ 10px (တစ္ဖက္ကို 5px စီနဲ႔ ဘယ္ညာ ႏွစ္ဖက္ေပါင္း Border 10px)

+ 20px (တစ္ဖက္ကို 10px စီနဲ႔ ဘယ္ညာ ႏွဏ္ဖက္ေပၚင္း Margin 20px)

အထက္က လို႔ အက်ယ္ 300px ရွိတဲ့ Emenent တစ္ခုကိုတည္ေဆာက္ဖို႔အတြက္ CSS ကိုသံုးျပီးေအာက္က အတိုင္းေရးႏိုင္ပါတယ္၊

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Element တစ္ခုရဲ့ အက်ယ္ျဖစ္ေစ အျမင့္ ျဖစ္ေစ တစ္ခုခု ကိုတြက္ေတာ့မယ္ဆိုရင္ေတာ့ အထက္က အတိုင္း Padding , Border နဲ႔ Margin တို႔ကိုထည့္ျပီးတြက္ရပါတယ္၊