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

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

Вопрос задан 6 лет 9 месяцев назад

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

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

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, просто картинка в другом теге) добавляют дополнительное пространство снизу родительского блока.

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

• html
• css

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

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

vertical-align: top;

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

display: block;

Картинка, по умолчанию, отображается как строковый элемент, на который влияет высота строки. Именно высота строки ответственна за расстояние между 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>

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

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

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

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

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

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

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

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

html — Как убрать отступ справа у картинки (Bootstrap)?

Вопрос задан

Изменён 2 года 1 месяц назад

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

Недавно начал ковырять Bootstrap. Когда верстал одну секцию заметил, что у картинок (img) появляется непонятный отступ справа. А именно 5px. Как не менял стили ничего не получилось. Надеюсь на помощь и объяснение)

work {
  margin: 70px auto;
}
.work__img {
  width: 100%;
  height: 100%;
  max-width: 320px;
  max-height: 180px;
  padding: 0;
  margin: 0;
}
.center {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
}

<section>
  <div>
    <div>
      <div>
        <img src="https://i.  imgur.com/MnDJ8xg.png" alt="work_1">
        <img src="https://i.imgur.com/CCjyGSL.png" alt="work_1">
      </div>
      <div>
        <img src="https://i.imgur.com/JdlSYpO.png" alt="work_1">
        <img src="https://i.imgur.com/MnDJ8xg.png" alt="work_1">
      </div>
      <div>
        <img src="https://i.imgur.com/CCjyGSL.png" alt="work_1">
        <img src="https://i.imgur.com/JdlSYpO.png" alt="work_1">
      </div>
      <div>
        <img src="https://i.imgur.com/MnDJ8xg.png" alt="work_1">
        <img src="https://i.imgur.com/CCjyGSL.png" alt="work_1">
      </div>
      <div>
        <img src="https://i.imgur.com/CCjyGSL.png" alt="work_1">
        <img src="https://i.imgur.com/JdlSYpO.png" alt="work_1">
      </div>
      <div>
        <img src="https://i.imgur.com/MnDJ8xg.png" alt="work_1">
        <img src="https://i.imgur.com/CCjyGSL.png" alt="work_1">
      </div>
    </div>
  </div>
</section>

• html
• css
• bootstrap

Такая проблема возникает из-за display: inline-block, который изображениям задаётся по умолчанию.

Для того, чтобы от них избавиться, нужно задать блоку display без inline. Также flexbox у родительского элемента перестраивает эту логику (flexbox также понадобится, чтобы вернуть логику, как в Вашем примере). Т.е вот так будет всё работать как надо:

work {
  margin: 70px auto;
}
.work__img {
  width: 100%;
  height: 100%;
  max-width: 320px;
  max-height: 180px;
  padding: 0;
  margin: 0;
}
.center {
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
}
.images {
  display: flex;
  align-items: center;
}

<section>
  <div>
    <div>
      <div>
        <img src="https://i.imgur.com/MnDJ8xg.png" alt="work_1">
        <img src="https://i. imgur.com/CCjyGSL.png" alt="work_1">
      </div>
    </div>
  </div>
</section>

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

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

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

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

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

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

html — Дополнительный отступ под тегом?

спросил 12 лет, 11 месяцев назад

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

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

Я получаю отступ под тегом img на своей веб-странице. HTML-код выглядит так:

 

  
Заголовок
  

 

Да, так что под изображением около 5 пикселей отступа (я могу сказать, потому что цвет фона родительского элемента li отличается). Я попытался назначить класс тегу img с отступом/маржой/границей, установленными на ноль, но без изменений. Мне интересно, есть ли что-то, что я упускаю из тегов img, что может вызвать появление этого заполнения?

Когда я удалю тег img и просто оставлю div «title», дополнительные отступы исчезнут,

Спасибо

————- Обновление ——- ————

Это происходит только на FF, хром и сафари выглядят нормально. Firebug также показывает, что заполнение является частью элемента img.

• HTML
• CSS

Если вы можете установить стиль отображения изображения на блок , это должно решить проблему. Установка по вертикали на снизу или посередине также должна работать. Я думаю, что проблема возникает из-за того, что Firefox пытается позиционировать встроенные изображения так, чтобы их нижний край был выровнен с базовой линией текста, и поэтому под изображением оставалось место для выносных элементов текста.

 
Title
 ..' />
 

 .social-icon {
  поле справа: 100px;
  поле слева: 100px;
  поле сверху: 0px;
  отступ справа: 100 пикселей;
} 

 <нижний колонтитул>
  <центр>
    

      

      
      
      
      
    
  
 

 .социальный значок {
поле справа: 10px;
поле слева: 10px;

} 

 <нижний колонтитул>
  <центр>
    

      
 com">
      
      
      
      
    
  
 

 .footer{
  дисплей: гибкий;
  выравнивание содержимого: по центру;
  гибкая упаковка: упаковка;
}

.социальный значок {
поле: 10 пикселей;

} 

 <нижний колонтитул>
  <центр>
    

      

      
       ./Flikk/images/twitter.png">