Как сделать масштабируемый отступ?

Здравствуйте. Есть блоки, размер которых задается внутренним содержимым. Блоки типа inline-block, имеют padding по краям в 6px. И есть проблема: если крутить масштаб в браузере в меньшую сторону, например, размер блоков пересчитывается и уменьшается, но отступы остаются такого же размера как и были. Каким образом можно сделать их изменение при изменении масштаба?

PS: Пробовал задавать размер в em, %, и не добился нужного результата.
  • Вопрос задан
  • 154 просмотра
Пригласить эксперта
Ответы на вопрос 2
TMGLUK
@TMGLUK
UX-дизайнер
При масштабе в современных браузерах должна масштабироваться вся страница, включая отступы. Там меняется размер viewport'а.

Если при мастштабе не меняются границы (а они в px, а не mm), то это значит, что масштабируется только текст. Значит, размер границ нужно задавать в em. Почему это не помогает у вас?
Ответ написан
@lan143 Автор вопроса
Вот пример с em:
<html>
    <head>
        <style>
            body {
                font-size: 12px;
            }
        
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            
            ul li {
                display: inline-block;
                padding: 0 0.5em;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
    </body>
</html>


3c2fb210e35a4a67831d53b80a7838da.pngdd0071a71aaa434199ea14af0e1849f3.png
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы