0

Возможно, вопрос будет немного наивным, но.... При размещении картинки в div, высота div будет больше чем высота самой картинки. Каким образом можно установить полное совпадение по высоте. В примере, высота img - 358.8, а div - 362.8 Спасибо

img {
    width: 30%;
    
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

        <div class="img">
          <img class="picture" src="https://w-dog.ru/wallpapers/9/17/322057789001671/zakat-nebo-solnce-luchi-oblaka-tuchi-pole-kolosya-zelenye-trava.jpg" alt="природа">
        </div>
</body>

</html>

0

1 ответ 1

1

img по дефолту имеет display: inline, из-за чего под картинкой появляется отступ.
Используйте display: block для img, чтобы это устранить.

.img {
  display: inline-block;
  border: 1px solid red;
  width: 30%;
}

.img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
<div class="img">
  <img class="picture" src="https://i.imgur.com/cTWZv5u.jpg" alt="природа">
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.