1

По какой-то причине длина div с классом thumb получается длиннее суммы длины содержимого этого div на 2-3px. Если поставить background-color, то под изображением появится небольшая полоска. Как этого избежать?

<div class ="wrapper">
    <div class = "thumb">
        <div>Текст</div>
        <div><img src="Картинка.jpg"></div>
    </div>  
</div>

Стили

.wrapper{
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    padding-left: 50px;

}

.thumb{
    width: 200px;
    text-align: center;
    font-size: 35px;


}

.thumb img{
   width: 100%;
   height:auto;
   margin-top: 10px;

} 
0

2 ответа 2

2

или родителю img - line:height: 0;

Пример

.thumb {
  max-width: 200px;
  margin-bottom: 25px;
}

.thumb img {
  width: 100%;
  height: auto;
}

.block-parent-img-line-height {
  line-height: 0;
}

.thumb .block-parent-img{
  border: 1px solid #f00;
}
<div class="thumb">
  <div>C line-height 0</div>
  <div class="block-parent-img block-parent-img-line-height"><img src="http://placehold.it/350x150"></div>
</div>

<div class="thumb">
  <div>Без line-height 0</div>
  <div class="block-parent-img"><img src="http://placehold.it/350x150"></div>
</div>

2
  • в текущем примере - разницы как-то не заметно. Можешь как-нибудь выделить, чтобы было видно, что примеры отличаются? А, увидел рамку при наведении. Может стоит ее постоянной сделать?
    – Grundy
    19 мар 2017 в 10:12
  • @Grundy - поправил
    – soledar10
    19 мар 2017 в 10:13
0

По умолчанию изображение имеет значение display:inline-block; и имеет выравнивание vertical-align:baseline; что и добавляет вертикальный отступ снизу. Исходя из этого есть 2 варианта:

1 - Добавьте изображению свойство display:block;

2 - Добавьте изображению свойство vertical-align:top; или vertical-align:bottom;

3
  • разве при vertical-align:top; отступ снизу уберется?
    – Grundy
    19 мар 2017 в 10:14
  • @Grundy емнип, у меня убирался всегда у любого vertical-align отличного от baseline
    – andreymal
    19 мар 2017 в 10:15
  • да, в том то и дело, что baseline выравнивает по базовой линии родителя, если родительский элемент не имеет базовой линии, то появляется отсуп
    – kizoso
    19 мар 2017 в 10:17

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.