Как убрать у img отступы

Question

Я не понимаю что это за отступ и откуда он взялся. Пробовал задать ширину на 100%, обнулял margin и padding. Не помогло

Answer 1

Используя инструмент разработчика (F12 на винде)

Находите картинку в html коде. Выделяете картинку в браузере и выделяете интересующие Вас отступы. Возвращаетесь в html код (F12) и в самой правой колонке, в большенстве случаев ответ на Ваш вопрос.

Смотрите img и родительские блоки.

Answer 2

Обрезать можно отрицательным margin или clip-path.

Если делать через отрицательный margin, то сам элемент помимо margin должен иметь стиль position: relative, а родительский блок должен быть размером в обтяжку самой картинки и иметь стиль overflow: hidden.

h3,
body {
  margin: 0;
  padding: 0;
  text-align: center;
}

span {
  overflow: hidden;
  height: max-content;
  width: max-content;
  display: inline-block;
}

span > img { margin: -50px; position: relative; }

div { float: left; }

<div>
  <h3>Оригинал</h3>
  <img src="https://images.unsplash.com/photo-1640825573527-f41f4221a725?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMjZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&h=160&q=60" />
</div>

<h3>Нарезка</h3>
<span>
  <img src="https://images.unsplash.com/photo-1640825573527-f41f4221a725?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMjZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&h=160&q=60"/>
</span>

БЛОГ НА HUSL

Как убрать у img отступы

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