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

Question

[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 .

Answer 1

[Андрей Куклин]

Единственного верного способа нет. На вскидку можно придумать еще 3-5 штук. Используй тот, который тебе по душе.

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

Если нет установки дизайнера или макета под эти разрешения, то делай такие, какие считаешь нужными. Ты - верстальщик. Это твоя зона ответственности. + никто не отменял диалог с дизайнером. Если говорить конкретно про этот случай, то я бы сделал отступы меньше 80px. На макет это не повлияет.

Answer 2

[Александр]

Есть такая вещь как сетка. В сетку входит понятие контейнер, контейнеру задают ширину в media запросах css. Что бы блоки не плавали, нужно задавать им во-первых ширину в %, во-вторых делать с ними медиа. Забудь про ширину контейнера в %. 1440 от 1600 будет 90%, а вот от 1920 - будет 1 728. Запаришься!
Зачем тебе паддинг?

Comments

[askEv]

Не использовал пока что сетки, но там ведь такой же принцип у контейнера max-width. А вот, делая без сетки, в такому случае как поступить? Паддинг я задавал,чтобы контент внутри контейнера не прилипал вплотную к краю окна на разрешениях меньше 1440.

Answer 3

[Froggyweb]

80px - это частный случай. а если экран будет шире нарисованного?
обычно паддинг выставляется в пикселов 20, чтобы текст не прилипал к краям экрана и контейнер центрируется по центру margin auto.
Вообще ты не на том заморачиваешься пиксел перфект что ли?