CSS में float और margin का संयोजन

अभी हमारा टेक्स्ट बाईं ओर की छवि से चिपका हुआ है। आइए इस टेक्स्ट को थोड़ा सा हटाने का प्रयास करते हैं। इसके लिए हम अपने पैराग्राफ को बाएँ margin 30px में सेट करेंगे, और parent div को लाल बॉर्डर देंगे।

अप्रत्याशित रूप से केवल वही टेक्स्ट दाईं ओर खिसकेगा जो parent 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;
}

Результат:

जैसा कि हम देखते हैं, वास्तव में पैराग्राफ बाएँ किनारे से हट रहे हैं, लेकिन छवि से नहीं, बल्कि parent 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 पर प्रतिक्रिया है, केवल पैराग्राफ वास्तव में छवि के नीचे स्थित हैं। आइए मार्जिन हटा दें, लेकिन छवि की अर्ध-पारदर्शिता बनाए रखें:

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;
}

Результат:

वास्तव में हमारे पैराग्राफ ऐसे दिखते हैं - उनका टेक्स्ट छवि द्वारा हटा दिया गया है, लेकिन भौतिक रूप से पैराग्राफ छवि के नीचे हैं, यह बॉर्डर से देखा जा सकता है जो parent 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;
}

Результат:

अब छवि पैराग्राफ के साथ चलती है!