Неизвестный промежуток между нижней границей img и parent divs

У меня есть CSS и HTML ниже. Я пытаюсь изменить размер изображения, и он не работает. Почему есть пробел под моим изображением?Неизвестный промежуток между нижней границей img и parent divs

#photo { 
 
    position: absolute; 
 
    margin-left: 15px; 
 
    margin-top: 15px; 
 
    border: 3px solid black; 
 
}

<div id="photo"> 
 
    <img src="http://www.placehold.it/210X180" alt="Picture" style="width:210px;height:180px" /> 
 
</div>

источник

2014-09-11 Sol Boden

Вы предоставили правильный html ?. как вы начинаете с закрывающего тега div ?. – Pbk1303

Предполагая, что вы случайно добавили закрывающий тег первым, я ввел код в jsfiddle, а ширина и высота меняются отлично. http://jsfiddle.net/ahs9dv0L/ – Pbk1303

er, подождите .. что случилось с разрывом в нижней части окна? http://jsfiddle.net/ahs9dv0L/1/ И нет, это не часть изображения ... Я пробовал четыре разных, все они получают одинаковый разрыв внизу. – zipzit

HTML

<div id="photo"> 
     <img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" style="width:250px;height:180px"/> 
    </div>

CSS

#photo { 
     position: absolute; 
     margin-left: 15px; 
     margin-top: 15px; 
     border: 3px solid black; 
     line-height: 0; 
    }

Добавление линии высоты: 0; заставляет изображение, чтобы выровнять внутри контейнера сНа, исключающий пустое пространство в нижней части изображения ... исх: http://jsfiddle.net/ahs9dv0L/3/ Смотри также: Image inside div has extra space below the image

источник

2014-09-11 01:02:22 zipzit

Спасибо! Я рад, что есть способ сделать это с помощью CSS, я не был уверен. –

Попробуйте удалить CSS граница

border: 3px solid black;

И добавить рамку внутри изображения тега

<img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" border="3">

Или удалить id="photo" из <div> и добавить в <img tag>

<img src="http://us.123rf.com/400wm/400/400/1xpert/1xpert1101/1xpert110100083/8712640-rainbow-cubes-3d-render-image.jpg" alt="Picture" id="photo">

источник

2014-09-11 00:55:50 user3835327

За исключением того, что это не избавляет от лишнего места в нижней части div, просто не дает вам увидеть его. –

Спасибо! Это тоже сработало. :) –

Я не знаю, почему это происходит.

Подобно тому, как вид сбоку «ответ», хотя, по каким-то это стоит: если вы не нуждаетесь в DIV, эта проблема исчезнет, если вы от нее избавиться и поставить

id="photo"

прямо на изображении.

источник

2014-09-11 00:57:50

Спасибо за ответ! Это тоже помогло, я об этом не думал :) –

Теперь вы ориентируетесь весь div разделом. Для работы с изображением используйте следующий код в файле css:

#photo img { 
       position: absolute; 
       margin-left: 15px; 
       margin-top: 15px; 
       border: 3px solid black; 
       }

источник

2014-09-11 01:13:12

Спасибо за информацию! –

Неизвестный промежуток между нижней границей img и parent divs

ответ

Смежные вопросы