@askEv

Как правильно задавать ширину блоку?

Здравствуйте ,есть вопрос ,связанный с шириной контейнеров . Заранее извиняюсь ,если вопрос покажется глупым или элементарным. Есть макет с шириной 1600px ,в нем контейнер 1440px(соответственно от контейнера по краям отступы по 80 px). Для контейнера прописывается max-width: 1440px и margin: 0 auto , но при разрешении меньше ,чем 1440px контент в контейнере начинается прилипать к окну браузера. И появилось несколько вариантов , как реализовать эти отступы , но какой правильный не знаю. Можно контейнеру задать width: 90% (т.к. 1440 от 1600 будет 90%) и так же его ограничить max-width: 1440px , можно контейнеру задать max-width: 1440 и ему же padding: 0 80 (но тогда max-width нужно ставить 1600px? Ведь padding тоже войдет в эти 1440 при box-sizing: border-box, который я почти всегда использую), так же можно в медиазапросе на брейкпоинте меньше 1600px задать контейнеру width: 100% и padding: 0 80px. И есть еще один вариант просто задавать max-width: 1440px , но padding уже задавать родителю контейнера. И вообще стоит ли так четко задавать этот padding в 80px( в данном случае)? Или можно задать любой padding ,чтобы контент просто не прилипал(потому что на данном макете отступы по краям 80px , но есть макеты, где отступы больше 100px)? Есть ли вообще разница в том какой вариант использовать или не стоит искать единственно верный? Что вы думаете по этому поводу?

Вот ссылка на макет, на примере которого я задал вопрос: https://yadi.sk/i/2QbVtbN-oisVRA .
  • Вопрос задан
  • 1160 просмотров
Решения вопроса 1
Skrase
@Skrase
Веб-разработчик, веб-дизайнер
Единственного верного способа нет. На вскидку можно придумать еще 3-5 штук. Используй тот, который тебе по душе.

И вообще стоит ли так четко задавать этот padding в 80px( в данном случае)? Или можно задать любой padding ,чтобы контент просто не прилипал(потому что на данном макете отступы по краям 80px , но есть макеты, где отступы больше 100px)?


Если нет установки дизайнера или макета под эти разрешения, то делай такие, какие считаешь нужными. Ты - верстальщик. Это твоя зона ответственности. + никто не отменял диалог с дизайнером. Если говорить конкретно про этот случай, то я бы сделал отступы меньше 80px. На макет это не повлияет.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
AleksandrB
@AleksandrB
Совсем недавно вывел "Hello world"
Есть такая вещь как сетка. В сетку входит понятие контейнер, контейнеру задают ширину в media запросах css. Что бы блоки не плавали, нужно задавать им во-первых ширину в %, во-вторых делать с ними медиа. Забудь про ширину контейнера в %. 1440 от 1600 будет 90%, а вот от 1920 - будет 1 728. Запаришься!
Зачем тебе паддинг?
Ответ написан
@Froggyweb
80px - это частный случай. а если экран будет шире нарисованного?
обычно паддинг выставляется в пикселов 20, чтобы текст не прилипал к краям экрана и контейнер центрируется по центру margin auto.
Вообще ты не на том заморачиваешься пиксел перфект что ли?
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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