Отступ от картинки css: Как сделать отступ от картинки?

Leave a Comment / Css / By /

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

Вопрос задан

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

Просмотрен 4k раз

CSS

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

HTML

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

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

Вы можете заметить, что сама картинка уже «закончилась», но родительскому блоку все равно снизу добавляется некоторое свободное пространство. С чем это связано и как от этого избавиться — вопрос.

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

  • html
  • css

2 

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

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

vertical-align: top;

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

display: block;

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>
  <div>
    <img src="http://satyr.io/100x100/1" alt="">
  </div>
  <div>
    <img src="http://satyr.io/100x100/2" alt="">
  </div>
</div>

2

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

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

2

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как быстро сделать отступ картинки от текста в WordPress

Привет! В новых версиях WordPress отступ картинок от текста делать не совсем удобно, а если точнее, то вообще не удобно. В ранних версиях WP можно было задать отступ картинки прямо в параметрах изображения, но теперь такая возможность отсутствует. В этой статье, я расскажу несколько способов, как сделать отступ картинки от текста. Читайте также, как сделать уникальную картинку.

Этот способ простой, но не совсем удобный. В этом случае, после установки картинки в текст, надо дополнительно прописать HTML код:  style=”margin: 5px 5px 5px 5px;”, который задает отступы со всех сторон картинки: верх, право, низ, лево. Смотрите пример:

<img title=»заголовок» src=»http://картинка.jpg» alt=»заголовок» />

В свои статьи я добавляю небольшое изображение вначале статьи, в котором мне нужно задать только отступ от левого и правого края 5 пикселей. Для этого я прописываю следующий код:  style="margin-left: 5px; margin-right: 5px;"

2-й спрособ: плагин

Advanced Image Styles

Плаигин Advanced Image Styles позволяет задавать отступы картинке прямо в параметрах изображения. Можно задать не только отступы, но цвет и толщину рамки. Это простенький плагин, и в описании не нуждается. Перейдем к третьему способу.

3-й способ: отступ картинки с помощью CSS

При редактировании картинки в WordPress, можно добавить CSS-класс изображения. Именно таким способом можно быстро задавать отступ картинкам в WordPress. С помощью CSS можно задать не только отступ, но и определенный стиль, например, толщину и цвет рамки.

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

Как сделать отступ картинки от текста в WordPress 4.x

 

В файле stylee.css можно прописать несколько стилей для добавления к изображениям. Вам потом останется только решать, как какой картинке применить тот или иной стиль. В этой статье я покажу простой пример, т. е. покажу один простенький стиль и как его применить.

Чтобы понять, как это работает, сделайте следующее: в файле стилей style. css, который находится в шаблоне Вашего сайта, добавьте в самом конце следующий код

/* стиль для картинок */
.mystyle  {
margin: 0px 5px 0px 5px;
border: 2px solid #5A5AFF;

}

 

1.    Слово mystyle – это и есть название стиля, и его можно заменить любым другим.

2.    Параметр margin задает отступы, о которых я писал выше

3.    Строка border задает толщину рамки и цвет

Этот стиль задает картинке отступ в 5 пикселей, справой и с левой стороны, а также рамку синего цвета, толщиной 2 пикселя. Теперь, чтобы добавить картинке стиль, нужно в параметрах изображение, прописать CSS-класс «mystyle», как показано на скриншоте выше.

Для изображения можно применить разные красивые стили, и с разными эффектами.
___________________
К уроку 195. Как скрыть, или подменить версию WordPress

html — Удалить необъяснимое поле/пробел изображения (CSS)

У меня есть необъяснимое поле изображения/пробел под изображением при включении изображений в мою тему WordPress.

Вы можете увидеть его здесь: http://www.wlanradios.net/logitech-squeezebox-radio/

Посмотрите изображение логотипа Amazon внутри содержимого или прокрутите вниз и посмотрите в виджет боковой панели «Ähnliche WLAN Radios» с маленькие миниатюры. Изображения, кажется, имеют небольшое поле-нижнее/пространство под ним, которое я не могу избавиться. Я обнаружил html/css с помощью firebug, но не понял, откуда взялись эти поля. Я на самом деле пытался

 изображение {
маржа: 0! важно;
заполнение: 0! важно;
граница:0!важно;
}

, чтобы перезаписать все возможные причины для поля, но безуспешно.

Откуда берется маржа и как ее убрать?

  • HTML
  • CSS
  • изображение
  • поле

4

Просто поместите эти изображения:

 display: block;

ОБНОВЛЕНИЕ:

Некоторые пояснения: img является встроенным элементом, поэтому он должен обрабатывать пробелы, высоту строки и т. д., как и все встроенные элементы. Я предполагаю, что пространство, которое вы видите, на самом деле вызвано высотой строки. Итак, еще одно решение, если вы хотите сохранить свой img в качестве встроенных элементов, — установить его родительский line-height: 0; .

0

Вы пробовали: vertical-align: middle

Я внимательно изучил проблему, это немного похоже на иглу сена.

1) Amazon Image box — проблема связана с тегом td , который создает отступ со всех сторон 6.71667px . Это НАСИЛЬНО создано отступом td,th

, для которого установлено значение 0,5em

3 й, тд { интервал между границами: 3px; // Измените это заполнение на 0,5 em, и вы должны уничтожить Amazon Extra Space набивка: 0,5 см; граница: 1px сплошная #CCC; }

Вы должны иметь возможность найти и отредактировать строку 183 приведенной выше темы css из wp-content/themes/ar2-2-b-2-fixed/styles. css

2) Что касается второй проблемы с WLAN Radios Pic, это изображение вставлено из-за Для всех тегов DIV Padding установлено значение 4px, которое действует на изображения WLAN Radio.

Вот фото проблемы:

Amazon Image Проблема решена Pic

Надеюсь, это поможет 🙂

1

Проверьте высоту строки в элементах img и установите для нее значение 1. Вы должны иметь высоту строки >

1 в родительском элементе.

Вы также можете изменить отображение этих изображений на «блок» (чтобы избежать межстрочного интервала).

2

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

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

CSS: поле для изображения –

спросил

Изменено 11 лет, 11 месяцев назад

Просмотрено 10 тысяч раз

У меня есть такой html:

.iconGlobe — это значок, такой же, как и самый красный, который выглядит так:

 .iconGlobe{
фон: url(../images/icons/globe_16x16.png) без повтора;
ширина: 16 пикселей;
высота: 16 пикселей;
граница: нет;
дисплей: встроенный блок;
должность: родственница;
текстовое оформление: нет;
}

Я пытаюсь сделать отступ между якорными ссылками, например:

 #userbar a{
поле справа: 8px;
}

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

1

нельзя задавать поля встроенным элементам. измените свой код на:

 #userbar a{
отображение: встроенный блок;
поле справа: 8px;
}

, но обратите внимание, что более старые версии IE могут игнорировать это…

Это проблема случая? в вашем html у вас есть

— обратите внимание на заглавную букву B, а в CSS у вас есть

 #userbar a{

— строчная буква b .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *