Хотел чтобы фото были на всю ширину без пробелов. Что за отступы от фотографий?

Question

[Danil2134]

Почему так получилось, отступы не получается эти убрать

<section class="slider">
          <div class="slider__div">
            <div
              class="slider__section"
              style="background-image: url(Images/1вариант.jpg)"
            >
              <div class="container">
                <div class="slider__">
                  <h2 class="slider__title">ДИЗАЙН И СТРОИТЕЛЬСТВО</h2>
                  <p class="slider__text">
                    Совокупность зданий и сооружений, создающих пространственную
                    среду для жизни и деятельности человека
                  </p>
                </div>
              </div>
            </div>
            <div
              class="slider__section"
              style="background-image: url(Images/2вариант.jpg)"
            >
              <div class="container">
                <div class="slider__">
                  <h2 class="slider__title"></h2>
                  <p class="slider__text"></p>
                </div>
              </div>
            </div>
            <div
              class="slider__section"
              style="background-image: url(Images/3вариант.jpg)"
            >
              <div class="container">
                <div class="slider__">
                  <h2 class="slider__title"></h2>
                  <p class="slider__text"></p>
                </div>
              </div>
            </div>
          </div>
        </section>

.slider__div {
height: 660px;
}

.slider__section {
width: 33%;
height: 460px;
/*display: inline-block;*/
position: relative;
float: left;
background-repeat: no-repeat;
/*justify-content: space-between;*/
display: flex;
align-items: center;
justify-content: center;
}

.slider__ {
display: flex;
flex-direction: column;
padding: 0 15px;
}

.slider__title {
font-size: 20px;
font-weight: 700;
color: #fff;
}

Comments

[Danny Arty]

Так у вас они фоном же идут. Отступы видимо между элементами с классом .slider__section, учитывая что они 33% в ширину. Ну или задайте им еще background-size:cover;, может изображения просто не всю ширину блока занимают.

[Rsa97]

Сделайте пример на codepen, по вашей картинке непонятно, какие параметры у изображений. Может им просто своей ширины не хватает, чтобы заполнить div.

[Ankhena]

Сейчас никто не использует float для сеток.
Сделайте .slider__div флексом.

Ещё нужно знать, что после инлайновых элементов браузер ставит "пробел" (вправо или вниз). Флексы решают и эту проблему.

Ну и сейчас, без примера проблемы на codepen.io, мы играем в угадайку

Answer 1

[GeorgyPy]

img {
    margin-left: 0;
}

или

img {
    padding-left: 0;
}

если не помогло используй тоже самое только right а не left

Comments

[Ankhena]

Во-первых, не поможет.
Во-вторых, там и img-то нет.

Answer 2

[Михаил Лялин]

CSS: использование внутренних и внешних отступов