Урок 183 із 239
77%
← Назад

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

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

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

Як і margin, властивість padding має свої особливості при роботі з елементами, які мають float.

Розглянемо приклад, коли картинка знаходиться перед абзацами та має float: left.

Padding у абзацах поруч із float-елементом

<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;
  padding-left: 30px;
  border: 1px solid green;
}

img {
  float: left;
  opacity: 0.5;
}

Чому padding не відсуває текст від картинки

Причина в тому, що абзаци фізично знаходяться під плаваючим елементом. Padding змінює внутрішній простір самого абзацу, а не положення картинки.

Картинка всередині абзацу

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

<div>
  <p>
    <img src="img.png" alt="">
    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;
  padding-left: 30px;
  border: 1px solid green;
}

img {
  float: left;
  opacity: 0.5;
}

Як правильно зробити відступ від картинки

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

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

Висновок

  • padding змінює внутрішній простір елемента.
  • padding не створює відстань між float-картинкою та текстом.
  • float-елемент може знаходитися під блоком абзацу.
  • Для відступу від картинки використовуйте margin у самої картинки.
❗ Важливо:

Розуміння поведінки float важливе для роботи зі старим CSS-кодом, але сучасні макети краще створювати через Flexbox та Grid.

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

📌 Завдання:
  1. №1. Створіть контейнер із картинкою та двома абзацами.
  2. №2. Додайте картинці float: left.
  3. №3. Додайте абзацам padding-left: 30px.
  4. №4. Перевірте, чому текст біля картинки не змістився.
  5. №5. Перенесіть картинку всередину абзацу та порівняйте результат.
💡 Показати підказку

Padding працює всередині елемента. Якщо потрібно відсунути текст від картинки — задайте margin самій картинці.

✅ Показати відповідь
img {
  float: left;
  margin-right: 30px;
}