Как я могу выровнять мои левую и правую границы, которые рассчитывает susy?
Я пытаюсь создать что-то похожее на браузер скользящих файлов GitHubs 
В основном это работает, но я пытаюсь стилизовать его, и я получаю это с моими границами:
.claim-header, .support-header{
text-align: center;
background-color: $argument-review-banners;
padding: 0.3em;
font-family: "Jockey One",Arial,Georgia,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 20px; // <--- this line breaks it
text-transform: uppercase;
border-color: black;
border-style: solid;
}
кажется, что размер шрифта внутри div (каждая из этих строк является div, поскольку на самом деле это не таблица, так как я не делаю просмотр файлов как таковой) - это то, что его нарушает, кажется, что вычисление ширина отличается из-за размера шрифта. Я думал, что susy рассчитывает ширину на основе базового шрифта, а не шрифта элемента. Это на 2 пикселя, и мне интересно, если это какая-то ошибка округления.
Я мог бы исправить это с помощью еще одного div обертки. Но мне интересно, каким будет правильное решение.
1 ответ
Эта проблема не связана с Susy - у вас будет такая же проблема с любой шириной на основе em. Сьюзи не может знать, что вы изменили размер шрифта или хотите использовать другой em значение - это все рассчитывается на уровне браузера.
container Mixin будет выводить то же самое em ширина каждого места, где вы его используете (с теми же настройками), но их размер зависит от локального размера шрифта. Это рассчитывается браузером, и Сьюзи ничего об этом не знает и не контролирует. Есть несколько вариантов.
- Вы можете построить свои сетки в
rem(root em) вместо значений в современных браузерах. - Вы можете использовать
$container-widthнастройка переопределения вычисленной ширины - используйте px, % или установите ширину. - Вы можете установить один внешний контейнер (возможно,
<body>?) вокруг всех этих элементов. - Вы можете изменить размер шрифта во вложенном элементе, а не в контейнере.