Хотел чтобы фото были на всю ширину без пробелов. Что за отступы от фотографий?
Почему так получилось, отступы не получается эти убрать
<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> |
<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;
}
Дополнительно:
Так у вас они фоном же идут. Отступы видимо между элементами с классом .slider__section, учитывая что они 33% в ширину. Ну или задайте им еще background-size:cover;, может изображения просто не всю ширину блока занимают.
Сделайте .slider__div флексом.
Ещё нужно знать, что после инлайновых элементов браузер ставит "пробел" (вправо или вниз). Флексы решают и эту проблему.
Ну и сейчас, без примера проблемы на codepen.io, мы играем в угадайку
Ответы:
img { margin-left: 0; } |
img { margin-left: 0; }
или
img { padding-left: 0; } |
img { padding-left: 0; }
если не помогло используй тоже самое только right а не left
- Во-первых, не поможет.
Во-вторых, там и img-то нет.
CSS: использование внутренних и внешних отступов
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того, чтобы фотографии занимали всю ширину экрана без отступов, вам необходимо добавить следующий CSS-код к вашему стилю:
img { width: 100%; height: auto; display: block; margin: 0; padding: 0; }
Этот код устанавливает ширину изображения на 100% от родительского элемента, сохраняя пропорции картинки с помощью свойства `height: auto`. Также, с помощью `display: block` изображение будет занимать всю доступную ширину и не будет иметь отступов вокруг него.
Если у вас есть отступы вокруг изображений, возможно, они устанавливаются другими стилями в вашем CSS. Убедитесь, что другие стили не перекрывают этот код, который мы предоставили.
Таким образом, после добавления этого CSS-кода, ваши фотографии будут отображаться на всю ширину экрана без каких-либо отступов.