Как уменьшить расстояние между текстом к картинкой

Question

Подскажите, есть ли возможность не меняя размеров картинки и высоты строки, уменьшить расстояние прижать текст к картинке снизу на расстояние, близкое к марджину? https://codepen.io/smile33/pen/eYgZNBR

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid black;
  min-width: 100px;
  max-width: 700px;
  margin: 20px auto;
  text-align: justify;
}

h2 {
  color: black;
  margin: 10px;
}

p {
  margin: 10px;
  font-family: sans-serif;
  line-height: 2;
  font-size: 13px;
}

p.link {
  text-align: right;
  margin-bottom: 30px;
}

a {
  text-decoration: none;
  color: blue;
}

.imgleft {
  float: left;
  /* Выравнивание по левому краю */
  margin: 7px 7px 7px 0;
  /* Отступы вокруг картинки */
}

<div class="wrapper">
  <h2> Новости </h2>
  <p><img src="https://i.ibb.co/Yhn7CJS/1.png" alt="" class="imgleft">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae quos
    molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p class="link"><a href="#">подробнее...</a></p>
</div>
<div class="wrapper">
  <h2> О Компании </h2>
  <p><img src="https://i.ibb.co/sb5vnRG/2.png" alt="" class="imgleft"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p class="link"><a href="#">подробнее...</a></p>
</div>
<div class="wrapper">
  <h2> Интересное </h2>
  <p><img src="https://i.ibb.co/sQTfF8G/3.png" alt="" class="imgleft"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p class="link"><a href="#">подробнее...</a></p>
</div>

Answer 1

Можно попробывать у картинки убрать нижний отступ, например оставить только сбоку по 7 пикселей, и то мне кажется лучше оставить только справа,если по макету не нужен линий отступ слева(так симпотичнее смотриться), внизу 0 и вверху тоже. А если нужен вверху отступ, то мне кажется, лучше задать для заголовка нижний отступ. Но тут может получиться другая проблема, если поменять для параграфа высоту строки, то ситуация может повториться

.imgleft{
    float:left; /* Выравнивание по левому краю */
    margin: 0 7px 0 0 ; /* Отступы вокруг картинки */
}

Answer 2

В таких случаях нижний отступ между картинкой и текстом всегда зависит от нескольких свойств:

Высота height картинки
Размер font-size текста
Высота line-height межстрочного интервала текста
Иногда и от font-family семейство шрифта

Поэтому, чтобы всегда(!) на выходе всё было красиво, нужно указывать точный размер высоты картинки, и высчитывая, задавать значения выше указанным свойствам для параграфа и отступы сверху и справа для картинки. Отступы margin и padding у параграфа p откидываем, и задаем внутренний отступ padding контейнеру. Смотрите пример ниже. Хотя, и при всём этом "высчитывании", не всегда получается, чтобы на выходе в итоге отступы между картинкой и текстом оказались одинаковыми - пиксель-в-пиксель. Думаю, все со мной согласятся, что, наверное, это невозможно. Только лишь максимально приблизительно, и методом высчитывания.

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid black;
  min-width: 100px;
  max-width: 700px;
  margin: 20px auto;
  padding: 10px;
  text-align: justify;
}

h2 {
  color: black;
  margin: 10px;
}

p {
  font-family: sans-serif;
  font-size: 13px;
  line-height: 26px;
}

p.link {
  text-align: right;
  margin-bottom: 30px;
}

a {
  text-decoration: none;
  color: blue;
}

.imgleft {
  float: left;
  width: 220px;
  height: 120px;
  margin: 6.5px 6.5px 0 0;
}

<div class="wrapper">
  <h2> Новости </h2>
  <p><img src="https://i.ibb.co/Yhn7CJS/1.png" alt="" class="imgleft">Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae quos
    molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p class="link"><a href="#">подробнее...</a></p>
</div>
<div class="wrapper">
  <h2> О Компании </h2>
  <p><img src="https://i.ibb.co/sb5vnRG/2.png" alt="" class="imgleft"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p class="link"><a href="#">подробнее...</a></p>
</div>
<div class="wrapper">
  <h2> Интересное </h2>
  <p><img src="https://i.ibb.co/sQTfF8G/3.png" alt="" class="imgleft"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quasi, cum modi aliquam reprehenderit debitis sapiente, voluptas delectus mollitia sequi sint deleniti sed ipsa molestiae
    quos molestias nesciunt ipsum ab atque exercitationem necessitatibus! Reprehenderit, nostrum inventore ipsa cum, perferendis saepe officia itaque nulla ab repellendus maxime, quia quibusdam voluptas deserunt nam pariatur. Facilis vero distinctio nesciunt
    libero error ipsa consequatur natus nobis ea! Officiis harum tenetur saepe beatae deleniti natus deserunt at cupiditate nam! Error placeat explicabo eaque debitis velit amet maiores. Quisquam et ea doloremque debitis suscipit, cumque molestias quo
    saepe reprehenderit dolorem, accusantium facilis corrupti assumenda sequi voluptatibus?</p>
  <p class="link"><a href="#">подробнее...</a></p>
</div>

БЛОГ НА HUSL

Как уменьшить расстояние между текстом к картинкой

Ответы (2 шт):