Поєднання float і margin у CSS

Розбираємо особливості роботи margin з плаваючими елементами та розуміємо, чому відступи можуть працювати не так, як очікується.

Поєднання float і margin у CSS

Коли елемент має float, робота відступів може відрізнятися від звичайної поведінки блоків.

Розглянемо ситуацію, коли картинка плаває зліва, а текст знаходиться поруч із нею.

Проблема з margin у тексті

<div>
  <img src="img.png" alt="">

  <p>
    Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
  </p>

  <p>
    some long text
  </p>
</div>

div {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}

p {
  margin-left: 30px;
}

img {
  float: left;
}

Перевіряємо межі елементів

Щоб зрозуміти, що відбувається, додамо зелену межу для абзаців.

p {
  margin-left: 30px;
  border: 1px solid green;
}

img {
  float: left;
}

Використання opacity для перевірки

Якщо зробити картинку напівпрозорою, стає видно, що текстові блоки фізично знаходяться під нею.

img {
  float: left;
  opacity: 0.5;
}

Коли картинка знаходиться всередині абзацу

Якщо помістити зображення всередину першого абзацу, float буде працювати вже відносно цього абзацу.

<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet.
  </p>

  <p>
    some long text
  </p>
</div>

p {
  margin-left: 30px;
  border: 1px solid green;
}

img {
  float: left;
  opacity: 0.5;
}

Головний висновок

float змінює спосіб взаємодії елемента з текстом.
Блоки з float можуть знаходитися під іншими блоками.
margin працює для самого блоку, а не для відстані між текстом і float-елементом.
Якщо потрібно керувати відстанню від картинки, краще задавати margin самій картинці.

❗ Важливо:

Для створення сучасних макетів краще використовувати Flexbox або Grid. float сьогодні переважно застосовують для обтікання текстом.

Практичне завдання

📌 Завдання:

№1. Створіть div із картинкою та двома абзацами.
№2. Додайте картинці float: left.
№3. Додайте абзацам margin-left: 30px.
№4. Додайте межі та перевірте розташування блоків.
№5. Перемістіть картинку всередину першого абзацу та порівняйте результат.

💡 Показати підказку

Якщо потрібно зробити відступ саме між текстом і картинкою, використовуйте margin для картинки.

✅ Показати відповідь

img {
  float: left;
  margin-right: 30px;
}