float-ის და margin-ის კომბინაცია CSS-ში

ამჟამად ჩვენი ტექსტი მიკრულია სურათთან მარცხენა მხრიდან. მოდით, ვცადოთ ამ ტექსტის ოდნავ გადაწევა. ამისთვის მივანიჭოთ ჩვენს აბზაცებს მარცხენა margin 30px-ით, ხოლო მშობელ დივს - წითელ ჩარჩოს.

მოულოდნელად მარჯვნივ მხოლოდ ის ტექსტი გადაიწევს, რომელიც მიკრულია მშობელ დივს, ხოლო ტექსტი, რომელიც მიკრულია სურათს - არ გადაიწევს:

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

Результат:

როგორც ვხედავთ, სინამდვილეში აბზაცები იწევა მარცხენა კიდიდან, მაგრამ არა სურათიდან, არამედ მშობელი დივიდან. უფრო დეტალურად გასაცნობად, მოდით დავამატოთ სურათს ნახევრადგამჭვირვალობა opacity თვისების მეშვეობით:

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

Результат:

აი, ასე გამოიყურება ჩვენი აბზაცები სინამდვილეში - მათი ტექსტი სურათმა გადაწია, მაგრამ ფიზიკურად აბზაცები სურათის ქვეშ იწევს, ეს ჩანს ჩარჩოში, რომელიც იწყება მშობელი დივის მარცხენა კიდიდან.

მოდით, დავაბრუნოთ 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;
}

Результат:

ახლა სურათი აბზაცებთან ერთად მოძრაობს!