По умолчанию у картинки vertical-align: baseline;.
<style> figure { border: 10px solid #456; } </style> <figure> <img alt="" src=""> на одной линии с текстом. Без свисания букв (р,д,у,ц) </figure>
Как убрать нижнюю полосу или отступ от картинки до div (или другого родительского элемента)
Вариант 1. Разместить изображение по середине строки
<style> figure { border: 10px solid #456; } img { vertical-align: middle; } </style> <figure> <img alt="" src=""> посмотреть немного другой ракурс </figure>
Вариант 2. Убрать размер шрифта или высоту строки
<style> figure { border: 10px solid #456; line-height: normal; font-size: 0; /* или */ line-height: 0; } </style> <figure> <img alt="" src=""> </figure>
Вариант 3. Сделать фотографию блоком
<style> figure { border: 10px solid #456; } img { display: block; } </style> <figure> <img alt="" src=""> </figure>
Вариант 4. Задать фото float
<style> figure { display: inline-block; /* убрать действие float вне родительского блока */ width: calc(100% - 100px); /* Аааа!!!! Почему именно 100px???? Я к этой цифре пришла путём перебора значений */ border: 10px solid #456; } img { float: left; } </style> <figure> <img alt="" src=""> </figure>
2 комментария: