В каких случаях можно пренебрегать 4px сеткой?

Question

[Alexander]

Как правильно использовать сетку в 4px? Например кнопка, если если выравнивать всю кнопку под сетку, текст не по сетке и наоборот, если выравнивать текст по сетке, сама кнопка выходит. Как правильно и логично будет поступить?

Answer 1

[Роман]

Таки все по сетке — паддинги по 16px (4*4), а ширина контента определяется динамически, в зависимости от содержимого.

Comments

[Alexander]

Да, но только снизу на 1px меньше отступ, и мне это режет глаз.

[itisksey]

Alexander, кроме вас этого никто не заметит)

[Alexander]

itisksey, перфекционист внутри душит :)

[Роман]

Alexander, а вы его душите в ответ :)

Answer 2

[profesor08]

Как правильно и логично будет поступить?

Раз и навсегда разобраться как работает текст и как он отображается в строке.

Comments

[Alexander]

подробней можно?

[profesor08]

Alexander, смотреть надо не на буковки, а на строку целиком. И выравнивать надо по строке, а не по буковкам. Так как это строка содержит буковки, а не буковки создают строку, и она больше чем размер буковок, на столько больше, чтоб в нее могли поместить и маленькие буковки, и большие буковки, и буковки с закорючками, и буковки с шляпками, и про прочие символы не забываем.

[Alexander]

profesor08, меня интересует тот пример, который я скинул. Я и до Вашего "совета" все прекрасно знаю про строки и про "буковки". Могли бы не утруждать себя и не писать максимально бесполезный ответ.

[profesor08]

Alexander, а почему он бесполезный?

Answer 3

[itisksey]

По вертикали в таких случаях пренебрегают выравниванием для текста, чтобы кнопка согласовывалась с другими компонентами по высоте. Это важнее.
Если вопрос про горизонтальную ширину, то она обычно динамическая и не должна ложиться в сетку.

Comments

[Alexander]

Не, с горизонтальной проблем нет. Только с вертикальной.

Answer 4

[Марк Мануилов]

Из того, что я вижу, line-height текст составляет 8px и вертикальный отступы 16px. Так что все хорошо, как Роман заметил, разницы никто не заметит, ели этот шрифт будет использоваться в одинаковых контекстах. Но бывают ситуации, когда нужно сочетать два разных шрифта и их отклонения могут быть достаточно серьезными. В таких случаях я делаю просто, отдельно текст добавляю во фрейм и с помощью автолояота двигаю пиксели до нужного выравнения.