Как убрать лишние отступы у контейнера при вёрстке?

Question

Birif @Birif

Как убрать лишние отступы у контейнера при вёрстке?

Здравствуйте. Верстаю ради тренировки фиксированный макет, ширина из PSD — 1700px. При верстке слева и справа от контейнера появляются белые отступы, как показано на картинке (границы контейнера выделены красной рамкой).

Оригинальный макет (на Хабр не загружается полностью): https://imgur.com/a/7X9iJZe

Каким образом это можно исправить? Ширина синего баннера установлена на 1700px. Установка width для body и html не помогает.

CSS стили:

.container
{width: 1700px;}

.banner
{
width: 1700px;
height: 590px;
background-color: #709dca;
}

Вопрос задан более двух лет назад
168 просмотров

6 комментариев

Подписаться 1 Средний 6 комментариев

Евгений Журов @Zhuroff

margin: 0 для body?

Написано более двух лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

А вы уверены, что это отступы у вашего контейнера, а не внутренние паддинги или отстпы у его родителя? Инспектор, конечно не открывали и даже не знаете что это такое..

Написано более двух лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Оригинальный макет (на Хабр не загружается полностью)

Да о чём речь, если даже с простой формой на сайте справиться не можете.

Учите теорию!

Написано более двух лет назад
Birif @Birif Автор вопроса
Евгений Журов, помогло, частично, убрался отступ слева.
Сергей delphinpro, об инспекторе знаю и пользуюсь) про отступы на 100% не уверен, но других вариантов не увидел. На padding и margin проверил, они установлены на 0.

Вот как выглядит код:

HTML

<!DOCTYPE html> <body> <div class="container"> <div class="banner"> </div> </div> 

CSS

* {box-sizing: border-box;} body { margin: 0; padding: 0; } .container { width: 1700px; margin: 0; padding: 0; } .banner { width: 1700px; height: 590px; background-color: #709dca; }

Скриншот на сайте сразу не загрузился, подумал, это связано с размером (слишком большой) и перезалил на сторонний хостинг.
Написано более двух лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Birif, Ну вам же не обязательно загружать сюда скриншот размером 1920 ? можно уменьшить окно браузера и заскриншотить меньшую область.

По вашему вопросу.
Вы жёстко задали ширину контейнеру.1700. Если будете смотреть на мониторе 1920, то справа будет белая область (1920 минус 1700) пикс. В чем вопрос? пока у вас всё соответствует написанному коду.

Написано более двух лет назад
Евгений Журов @Zhuroff

Birif, подозреваю, вы хотите, чтобы баннер распространялся по всей ширине экрана? А контент внутри него был горизонтально центрирован? В таком случае баннеру не задается ширина вообще (гуглите о том, как ведут себя блочные элементы и чем они отличаются от строчных). Контейнер помещается внутрь баннера, а не наоборот. Гуглите как центрировать блочный элемент с заданной шириной. Свойство margin, например, в помощь. Кроме того, погуглите отличия свойств max-width и width. Подумайте, что разумнее задать контейнеру в данном случае.

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как сделать так ,что бы блок расширялся на всю ширину экрана?
- 1 подписчик
- вчера
- 104 просмотра
1

ответ
CSS

Средний
В чем разница между word-break: break-word и word-wrap: break-word?
- 1 подписчик
- 14 мая
- 135 просмотров
1

ответ
HTML

+1 ещё

Простой
Как задать фон блоку div?
- 1 подписчик
- 14 мая
- 180 просмотров
1

ответ
JavaScript

+3 ещё

Средний
Как реализовать метод align?
- 1 подписчик
- 14 мая
- 129 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать эффект ребристого стекла при наведении?
- 1 подписчик
- 14 мая
- 260 просмотров
1

ответ
Вёрстка

Средний
Почему мобильная адаптация на ios отличается от android?
- 1 подписчик
- 14 мая
- 89 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Подключение xml с помощью js к html?
- 3 подписчика
- 14 мая
- 348 просмотров
1

ответ
HTML

+2 ещё

Простой
Есть возможность свертать правильно шапку сайта, во всю ширину с SVG?
- 2 подписчика
- 13 мая
- 402 просмотра
1

ответ
CSS

+1 ещё

Простой
Как растянуть 2 дочерних flex элемента из 3-х при flex-wrap и flex-grow родителя?
- 1 подписчик
- 13 мая
- 45 просмотров
0

ответов
CSS

Простой
Как сделать подобную анимацию при скролле? ( неужели никто не знает )?
- 1 подписчик
- 13 мая
- 255 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 140 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Верстка и дизайн двух страниц по референсам

17 мая 2024, в 14:28

8000 руб./за проект

Разработать продающий дизайн для слайдера в интернет-магазине

17 мая 2024, в 13:55

100000 руб./за проект

Нужен HFT программист c#/c++

17 мая 2024, в 13:35

200000 руб./за проект

А вы уверены, что это отступы у вашего контейнера, а не внутренние паддинги или отстпы у его родителя? Инспектор, конечно не открывали и даже не знаете что это такое..
Оригинальный макет (на Хабр не загружается полностью)

Да о чём речь, если даже с простой формой на сайте справиться не можете.

Учите теорию!
Евгений Журов, помогло, частично, убрался отступ слева.
Сергей delphinpro, об инспекторе знаю и пользуюсь) про отступы на 100% не уверен, но других вариантов не увидел. На padding и margin проверил, они установлены на 0.

Вот как выглядит код:

HTML

<!DOCTYPE html> <body> <div class="container"> <div class="banner"> </div> </div> 

CSS

* {box-sizing: border-box;} body { margin: 0; padding: 0; } .container { width: 1700px; margin: 0; padding: 0; } .banner { width: 1700px; height: 590px; background-color: #709dca; }

Скриншот на сайте сразу не загрузился, подумал, это связано с размером (слишком большой) и перезалил на сторонний хостинг.
Birif, Ну вам же не обязательно загружать сюда скриншот размером 1920 ? можно уменьшить окно браузера и заскриншотить меньшую область.

По вашему вопросу.
Вы жёстко задали ширину контейнеру.1700. Если будете смотреть на мониторе 1920, то справа будет белая область (1920 минус 1700) пикс. В чем вопрос? пока у вас всё соответствует написанному коду.
Birif, подозреваю, вы хотите, чтобы баннер распространялся по всей ширине экрана? А контент внутри него был горизонтально центрирован? В таком случае баннеру не задается ширина вообще (гуглите о том, как ведут себя блочные элементы и чем они отличаются от строчных). Контейнер помещается внутрь баннера, а не наоборот. Гуглите как центрировать блочный элемент с заданной шириной. Свойство margin, например, в помощь. Кроме того, погуглите отличия свойств max-width и width. Подумайте, что разумнее задать контейнеру в данном случае.

Answer 1 · 2022-03-18 09:40:13

Антон Шаманов @SilenceOfWinter

та еще зажигалка...

используй resetcss/normalizecss

Ответ написан более двух лет назад

Комментировать

Как убрать лишние отступы у контейнера при вёрстке?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт