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

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;
}

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

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

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

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

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

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

WordPress

+1 ещё

Простой
Блочный сайт сверстать с уникальным дизайном, как лучше организовать редактирование текста конечным пользователем?
- 1 подписчик
- 4 часа назад
- 85 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- вчера
- 134 просмотра
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 96 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 95 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 83 просмотра
2

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Изображения на главную страницу в стиле Jetton и 1вин

25 нояб. 2024, в 00:22

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

Дизайн презентации

24 нояб. 2024, в 23:46

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

Разработать Telegram-бота для анализа звонков продаж

24 нояб. 2024, в 23:15

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

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

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

Учите теорию!
Евгений Журов, помогло, частично, убрался отступ слева.
Сергей 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

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

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

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

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

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

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