CSS တွင် float နှင့် margin ၏ ပေါင်းစပ်မှု

အခုဆိုရင် ကျွန်ုပ်တို့၏စာသားသည် ဓာတ်ပုံ၏ ဘယ်ဘက်ခြမ်းသို့ ကပ်နေပါသည်။ ထိုစာသားကို အနည်းငယ်ရွှေ့ရန် ကြိုးစားကြည့်ပါစို့။ ဤအတွက် ကျွန်ုပ်တို့၏ စာပိုဒ်များကို ဘယ်ဘက် margin အား 30px ပေးပြီး၊ မိဘ div ကို အနီရောင်အနားသတ်မျဉ်း သတ်မှတ်ပါမည်။

မျှော်လင့်မထားသည်မှာ မိဘ div နှင့် ကပ်လျက်ရှိသော စာသားသာ ညာဘက်သို့ ရွှေ့သွားပြီး၊ ဓာတ်ပုံနှင့် ကပ်လျက်ရှိသော စာသားမှာမူ မရွှေ့ပါ။

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
}
img {
  float: left;
}

Результат:

အဘယ်ကြောင့် ဤသို့ဖြစ်ရသည်ကို နားလည်ရန် စာပိုဒ်များကို အစိမ်းရောင် အနားသတ်မျဉ်း ထည့်ကြည့်ပါမည်။

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
}

Результат:

ကျွန်ုပ်တို့မြင်ရသည့်အတိုင်း၊ စာပိုဒ်များသည် အမှန်တကယ်တွင် ဘယ်ဘက်အစွန်းမှ ရွှေ့သွားသော်လည်း ဓာတ်ပုံမှမဟုတ်ဘဲ မိဘ div မှ ရွှေ့သွားခြင်းဖြစ်သည်။ အသေးစိတ်ကြည့်ရှုရန်၊ opacity property ကို အသုံးပြု၍ ဓာတ်ပုံကို ဖန်သားပြင်အလွှာ ထပ်ထည့်ကြည့်ပါမည်။

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

အခုတစ်ကြိမ် margin-left အတွက် တုံ့ပြန်မှုရှိကြောင်း အသေအချာမြင်နိုင်ပြီ၊ စာပိုဒ်များသည် အမှန်တကယ်တွင် ဓာတ်ပုံအောက်တွင် တည်ရှိနေသည်။ margin ကိုဖယ်ရှား၍ ဓာတ်ပုံ၏ ဖန်သားပြင်အလွှာကိုသာ ထားခဲ့ကြည့်ပါစို့။

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

ကျွန်ုပ်တို့၏ စာပိုဒ်များ၏ အမှန်တကယ်ပုံစံမှာ ဤသို့ဖြစ်သည် - ၎င်းတို့၏ စာသားများကို ဓာတ်ပုံက ရွှေ့ထားသော်လည်း၊ ရုပ်ပိုင်းဆိုင်ရာအားဖြင့် စာပိုဒ်များသည် ဓာတ်ပုံအောက်တွင် ရှိနေသည်၊ ထိုအချက်ကို မိဘ div ၏ ဘယ်ဘက်အစွန်းမှ စတင်သည့် အနားသတ်မျဉ်းဖြင့် မြင်နိုင်သည်။

margin ကို ပြန်ထည့်ပြီး ဓာတ်ပုံကို ပထမစာပိုဒ်အတွင်းသို့ ထည့်ကြည့်ပါစို့။

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

အခုဆိုရင် ဓာတ်ပုံသည် စာပိုဒ်များနှင့်အတူ ရွေ့လျားနေပါသည်။