html — Лишний отступ возле img

Задать вопрос

Вопрос задан

Изменён 6 лет 10 месяцев назад

Просмотрен 198 раз

Как убрать это лишний отступ в само низу , под изображением ? Читал статью на хабре:

Наверное, многие, при html-верстке, встречали «баг», когда, размещая > в блоке подряд два изображения, между ними возникает промежуток, > примерно в 3-5 пикселей. Этот эффект присутствует не только в горячо > > любимом IE6, но и в других браузерах. Большинство решали это с бубнами – подменой Doctype, убиранием лишних отступов в html-файле и так далее.

Начав искать решение проблемы в интернете, в том числе и на хабре, я понял, что вопросов по этому поводу много, но правильного ответа большинство так и не нашли.

В итоге выяснилось, что это вовсе не баг. IMG – внутристрочный элемент, и поэтому к нему применяется свойство vertical-align. В браузерах это свойство задается по умолчанию (в большинстве baseline, если не ошибаюсь).

Достаточно к изображению применить vertical-align:bottom и отступа внизу не будет. В других случаях будет неоднозначность, и браузеры будут вести себя на свое усмотрение. https://habrahabr.ru/post/51140/

НО эта методика и все остальные не работают , если способы кроме отрицательного margin убрать это отступ ?

* {
  margin: 0;
  padding: 0;
}
.clear,
.clear:after {
  content: "";
  display: block;
  clear: both;
}
div {
  width: 30%;
  border: 1px solid #888;
  margin: auto;
}
div p {
  width: 98%;
  margin: auto;
}
img {
  width: 35%;
  float: left;
  vertical-align: baseline;
}
<div>
  <img src="http://i1.mywishis.in/s/i/wishes/23/11/3/230x0_2311332646a15ea26e2b7172af891d87___jpg____4_1af7f70b.jpg" alt="img">
  <p>Nulla quis lorem ut libero malesuada feugiat.  Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
</div>

для тренировок : http://codepen.io/Geyan/pen/WxBQaK?editors=110

  • html
  • css
3

Это не из-за картинки отступ, а из-за переноса текста. Можно решить изменением font-size или line-height

Пример с изменением line-height

* {
  margin: 0;
  padding: 0;
}
.clear,
.clear:after {
  content: "";
  display: block;
  clear: both;
}
div {
  width: 30%;
  border: 1px solid #888;
  margin: auto;
}
div p {
  width: 98%;
  margin: auto;
  line-height: 1;
}
img {
  width: 35%;
  float: left;
  vertical-align: baseline;
}
<div>
  <img src="http://i1. mywishis.in/s/i/wishes/23/11/3/230x0_2311332646a15ea26e2b7172af891d87___jpg____4_1af7f70b.jpg" alt="img">
  <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
</div>

Пример с изменением font-size

* {
  margin: 0;
  padding: 0;
}
.clear,
.clear:after {
  content: "";
  display: block;
  clear: both;
}
div {
  width: 30%;
  border: 1px solid #888;
  margin: auto;
}
div p {
  width: 98%;
  margin: auto;
  font-size: 14px;
}
img {
  width: 35%;
  float: left;
  vertical-align: baseline;
}
<div>
  <img src="http://i1.mywishis.in/s/i/wishes/23/11/3/230x0_2311332646a15ea26e2b7172af891d87___jpg____4_1af7f70b.
 
 jpg" alt="img">
  <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
</div>
8

Используйте старый добрый display:block.

Пример №1:

img {
  display: block;
  float:left;
  border: 1px solid black;
}
<div>
  <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt="">    
</div>

Пример №2 (с текстом):

img {
  display: block;
  float:left;
  border: 1px solid black;
}
<div>
  <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt="">  
  <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24. jpg" alt="">  
  <p>dsadasdasdas as das das das dasd asd asd asd as dasd asdas</p>
</div>

<div>
  <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> 
  <p>dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas</p> 
</div>
5

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

Отменяем обтекание текстом картинки — Xiper

Автор: Александр Головко Дата публикации:

Задача

Сверстать блок, состоящий из картинки и текста, причем текст не должен обтекать картинку.

слева правильно, справа — нет

Дополнительное условие: ширина ни текста, ни картинки строго не определена. При отсутствии картинки текст занимает всю отведенную ширину.

Решение

Будем считать, что левая колонка может содержать не только картинку, а что-либо еще. Поэтому HTML у нас будет выглядеть так (вообще говоря, класс photo можно было бы присвоить самому img и обойтись без div’а):


<div>
	<img src="images/pic.jpg" alt=""/>
</div>
<div>
	Текстовый блок
</div>

Пробуем написать стили. С левой колонкой все ясно:


.photo {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}

Теперь рисунок стал слева, а текст обошел его справа. Но если текста больше, он будет «подныривать» под рисунок (см. картинку выше), а этого-то нам и не нужно.

Первое, что приходит в голову — «зафлоатить» и текст. Но в этом случае, если не прописать ширину текст упадет под рисунок!

float:left/right будет требовать ширину — иначе ничего не получиться!

Думаем дальше… Хорошим решением может показаться .description{margin-left: XXXpx}. Действительно, в некоторых ситуациях такой вариант проходит. Например, если размер картинки все-таки задан. Предположим, это резиновый блок новостей. Картинка не может быть шире, скажем 200px, а уже текст тянется и занимает всю оставшуюся ширину.

Тем не менее, у такого варианта есть существенной недостаток. Если блока с картинкой не будет, отступ все равно останется нелепой дыркой. Конечно, можно его убрать с помощью селектора сестринских элементов, как рассказано в статье Правильные анонсы новостей, но в нашем случае есть другое решение.

Запретить обтекание можно просто добавив overflow:hidden; для текстовой колонки. Тем самым мы установим для нее новый контекст форматирования (подробнее эта тема скоро будет раскрыта).

Единственный браузер, который среагирует на это неправильно — это конечно IE6. Специально для него колонке устанавливаем layout, например «флоатим» (ширину при этом задавать не понадобится).

Итак, решение поставленной задачи выглядит так:


.photo {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.description{
	overflow:hidden;
}
* html .description{	
	float:left;
}

Как всегда, в боевых условиях вместо хаков используем условные комментарии.

Демо пример. Проверено в:

  • IE 6-8
  • Firefox 3.0-3.6
  • Opera 9.5-10.5
  • Safari 4
  • Chrome 5

Плюс

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

Минус

Overflow:hidden не применимо, если в текстовой колонке есть, например, выпадающие окошки или какие-нибудь другие выступающие элементы.

Альтернативное решение

Update by Тимур, Vladimir

Тот же эффект отмены обтекания получим, если использовать для текстовой колонки display:table-cell; (или table). Для IE6-7 опять же придется устанавливать layout:


.photo {
	float: left; /* задаем обтекание */
	margin:10px; /* отступ для красоты */
	display:inline; /* для IE6, чтоб отступ слева не удвоился */
}
.description{
	display:table-cell;
	zoom:1; /* Осторожно! Строка невалидна  */
}

Но нужно иметь в виду, что если текста будет меньше чем на 1 строку, то следующий блок с текстом может расположиться справа от .description. То есть, у всего нашего текста с картинкой должен быть контейнер.

Материал

  • Correcting Orphans w/ Overflow

Отступ в HTML-изображениях — HTML

web5326946905 1

Привет. Я заметил, что когда я сделал отступ во второй строке своего URL-кода, чтобы поместить изображение медведя в упражнение, изображение не отображалось. Я полагаю, потому что я добавил лишние пробелы, которые сломали URL-адрес?

Просто интересно, что мне следует делать в будущем, когда у вас есть отступы и однострочный код, который при вводе занимает более одной строки, вы делаете отступы все это и рискуете сломать его? Или вы позволяете следующей строке естественным образом перемещаться в крайний левый угол страницы? Или IDE/браузер CodeCademy уникален, и при использовании автономного текстового редактора у меня не было бы этой проблемы?

К вашему сведению, когда я обновил свой браузер, другой многострочный код абзаца удалил отступы, которые я добавил ранее, без каких-либо побочных эффектов. Спасибо.

заинабр1 2

Привет,

Отступ не должен влиять на вывод,

Пожалуйста, вставьте свой код, чтобы я мог посмотреть и помочь вам

web5326946905 3

Ввод/вставка этого работает без каких-либо отступов во второй строке с нетронутым переносом текста:

img src=“https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear. jpg” /

Но отступ во второй строке делает это и ломает URL-адрес:

img src=»https://s3.amazonaws.com/codecademy-content /courses/web-101/web101-image_brownbear.jpg» /

Так правильно ли здесь не делать отступы или есть другой способ?

(Обратите внимание, что на концах нет угловых скобок, поскольку форум считает, что я загружаю изображения.)

Редактировать… браузер просто скрыл пробел после того, как я опубликовал его, на этом форуме нет функции предварительного просмотра?

Разрыв между контентом и курсами выглядит следующим образом: /codecademy-content /courses/web-101/

Редактировать 3… неважно, он снова скрыл пробелы. Я сдаюсь.

1 Нравится

заинабр1 4

Вот как форматировать код на форуме:

Когда дело доходит до отступа, вы делаете отступ всего тега, а не в середине кода, здесь вы нарушаете URL-адрес

, поэтому отступ будет таким:

 

        
Центр города
 
       Адресная строка 1
       Адресная строка 2

1 Нравится

web5326946905 5

Привет, еще раз спасибо за ответ.

Хм, когда я копирую и вставляю или набираю полный тег, он автоматически переносится, как только достигает конца текстового окна, отсюда и источник путаницы. Именно тогда я попытался вручную сделать отступ и сломал его. Думаю, мне следует просто оставить его нетронутым в будущем, независимо от того, как он выглядит.

К вашему сведению, ваша ссылка, кажется, перенаправляет на каталог codecademy, когда я ее открываю.

1 Нравится

6

Вставлен неправильный URL. Как форматировать код в сообщениях?

1 Нравится

web5326946905 7

Отлично, ссылка работает, посмотрю. Еще раз спасибо.

2 лайков

Как убрать отступ изображения

ответил к Грейельф (159 тыс. баллов)

Непонятно, что вы подразумеваете под «квадрат с левой стороной», вы имеете в виду:

а. Левая часть элемента Harlowe tw-passage , где расположены элементы HTML, сгенерированные из содержимого текущего отрывка.

б. Левая сторона окна просмотра веб-браузера (экран/страница).

в. Другая левая сторона…

Есть несколько HTML-элементов, составляющих видимую страницу, которые добавляют некоторое пространство в левой части окна просмотра, они (могут) включать:

а. Элемент фигура , в который вы обернули свой элемент img, который может иметь поле слева/начало/перед в зависимости от выбранного вами веб-браузера по умолчанию CSS.

б. Харлоу 9Элемент 0095 tw-story (который содержит элемент tw-passage ) имеет левое поле по умолчанию, равное 20% от текущей ширины окна просмотра веб-браузера.

в. Любые другие элементы или связанные с ними CSS, которые есть в вашей истории, но которые вы не включили в приведенный выше пример…

Я думаю, что это точка A, которая вызывает вашу проблему, вы можете исправить это, либо удалив элемент фигура из вашего отрывка или поместив CSS, как в одном из следующих двух примеров, в вашу историю Таблица стилей историй область:

a. Чтобы удалить только заданное по умолчанию поле слева/начало/перед из элемента фигура :

 фигура {
поле слева: 0;
}

б. Чтобы удалить все четыре поля по умолчанию (верхнее, правое, нижнее и левое) из элемента фигура :

 фигура {
маржа: 0;
}

примечания :

1. В атрибуте style вашего элемента img отсутствует завершающая кавычка.

2. Я также предлагаю перенести стиль с img в область таблицы стилей Story и с помощью класса CSS или идентификатора элемента применить его к вашему изображению.

No related posts.