1

Откуда эти зазоры? Делал разными способами но они не исчезают

.portfolio_pics {
  display: grid;
  grid-column-gap: 29px;
  grid-row-gap: 35px;

}

.portfolio_pics div img {
  width: 100%;
  height: 100%;
}

.portfolio_pics div:nth-child(1) {
  grid-column: 1/3;
}

.portfolio_pics div:nth-child(2) {
  grid-column: 3/4;
  grid-row: 1/3;
}

.portfolio_pics div:nth-child(6) {
  grid-column: 2/4;
  grid-row: 3/4;
}
<div class="portfolio_pics">
          <div class="image"><img src="Assets/images/p1.jpg" class="image_content"></div>
          <div class="image"><img src="Assets/images/p2.jpg" class="image_content"></div>
          <div class="image"><img src="Assets/images/p3.jpg" class="image_content"></div>
          <div class="image"><img src="Assets/images/p4.jpg" class="image_content"></div>
          <div class="image"><img src="Assets/images/p5.jpg" class="image_content"></div>
          <div class="image"><img src="Assets/images/p6.jpg" class="image_content"></div>
</div>

введите сюда описание изображения

3 ответа 3

0

За зазоры между элементами grid отвечают свойства:

  • grid-column-gap
  • grid-row-gap
  • или сокращенно grid-gap

Уберите их из ваших стилей и зазоров между элементами не будет.

Если вы про другое, то примените это к изображениям:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}  
2
  • Блин. Плохо сформулировал. Имел ввиду зазор между картинками и границей элементов грида(по вертикали) Commented 26 янв. 2020 в 12:02
  • @JakeTheDog проверьте с object-tit и width: 100%; height: 100%; Commented 26 янв. 2020 в 12:08
0

.portfolio_pics div img { display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Так заработало

0

Это из-за того, что тег <img> - display: inline по дефолту.
Чтобы избавиться от этого бага, используйте display: block;

.pre {
  display: inline-block;
  float: left;
  width: 150px;
}

.pre:nth-child(1) {
  margin-right: 10px;
}

.pre p {
  max-width: 150px;
  font-size: 13px;
}

.pre .img {
  background: red;
}

.pre.no-inline img {
  display: block;
}
<div class="pre">
  <div class="img">
    <img src="https://via.placeholder.com/150?text=Inline">
  </div>
  <p>Эта картинка строчная, под ней есть красная полоска - это отступ от картинки.</p>
</div>

<div class="pre no-inline">
  <div class="img">
    <img src="https://via.placeholder.com/150?text=Block">
  </div>
  <p>Эта картинка блочная, под ней уже не будет полоски</p>
</div>

Ваш ответ

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

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