Лишний отступ внизу блока, содержащего img

426
10 декабря 2016, 10:51

CSS

main div.image {
    display: block;
    width: 100%;
}
main div.image img {
    width: 100%;
    height: auto;
}

HTML

<div class="image">
  <img src="/images/nature-1.jpg" alt="">
</div>

Проблема в том, что этот код (да даже без любого CSS, просто картинка в другом теге) добавляют дополнительное пространство снизу родительского блока.

Вы можете заметить, что сама картинка уже "закончилась", но родительскому блоку все равно снизу добавляется некоторое свободное пространство. С чем это связано и как от этого избавиться - вопрос. Хотя, может быть, это нормально и добавляется вне зависимости от моего желания, прямо как margin'ы у p. Хотя от них можно избавиться.

Answer 1

Картинка, по умолчанию, отображается как строковый элемент, на который влияет высота строки. Именно высота строки ответственна за расстояние между div и img.

Решения два:

  1. Обнулить высоту строки для обертки.
  2. Сделать картинку блочным элементом.

.holder { 
  border: 1px solid lime; 
  outline: 1px solid #000; 
  width: 100px; 
} 
.fix-1 { 
  line-height: 0; 
} 
.fix-2 img { 
  display: block; 
}
<div class="holder"> 
  <div class="fix-1"> 
    <img src="http://satyr.io/100x100/1" alt=""> 
  </div> 
  <div class="fix-2"> 
    <img src="http://satyr.io/100x100/2" alt=""> 
  </div> 
</div>

Answer 2
main div.image img {
    width: 100%;
    height: auto;
}

Можно добавить

vertical-align: top;

либо использовать

display: block;
Answer 3

добавте в стили к картинке display: block; - такое поведение изначально изза того что картинка по умолчанию инлаин 

main div.image img {
   display: block;
   width: 100%;
   height: auto;
}
READ ALSO
Парсинг сайта curl php
PHP

Парсинг сайта curl php

Здравствуйте, как можно спарсить информацию с этого сайта (авторизованным) cpwowcircle

 515
Кеширование путей к файлам в PHP
PHP

Кеширование путей к файлам в PHP

Доброго времени суток! PHP запущен как fpm демонСудя по докам, результаты функции file_exists, stats и

 394
error_get_last() возвращает null
PHP

error_get_last() возвращает null

например, делаю так:

 354
Время до указанного часа
PHP

Время до указанного часа

Нужно посчитать время до ближайшего нужного часа, период - каждые 6 часов, это 00, 6, 12, 18Выдать время до этого часа в секундах

 359