Откуда берется пробел между элементом и псевдоэлементом (на планшете/мобилках)?

Question

alicepepel @alicepepel

Откуда берется пробел между элементом и псевдоэлементом (на планшете/мобилках)?

Здравствуйте.
Есть элемент - ярлык со скосом, сделанным псевдоэлементом. На десктопе стоит впритык к элементу, а на планшете появлется маленький зазор. Откуда он и как его устранить? Если сдвинуть на пиксель вправо псевдоэлемент, то, естсественно, на десктопе он заезжает на лишний пиксель внутрь элемента.

Вопрос задан более трёх лет назад
131 просмотр

2 комментария

Подписаться 1 Простой 2 комментария

Евгений Кузовлев @Kiyoshi

Скорее всего дело в масштабирование в системе

Написано более трёх лет назад

dmitrygavrish @dmitrygavrish

Как альтернативное решение (через transform: skew/skewX):

<div>
    <p>Some not so long text</p>
</div>

div {
  width: 400px;
  height: 50px;
  background-color: orange;
  transform: skewX(-45deg);
}

p {
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  color: #fff;
  transform: skewX(45deg);
}

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

Войти через центр авторизации

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

HTML

+1 ещё

Простой
Как Выделить слово приходящая из базы определенным цветом?
- 1 подписчик
- 26 минут назад
- 30 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 4 часа назад
- 85 просмотров
2

ответа
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 19 часов назад
- 43 просмотра
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 20 часов назад
- 52 просмотра
2

ответа
Веб-разработка

+1 ещё

Простой
Как работает спам сообщений в ютубе?
- 1 подписчик
- вчера
- 102 просмотра
2

ответа
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 48 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поместить картинку рядом с текстом?
- 1 подписчик
- вчера
- 83 просмотра
2

ответа
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- вчера
- 85 просмотров
3

ответа
Веб-разработка

Простой
Как сделать чтобы при нажатии на кнопку или сылку в div блоке открывалась галерея?
- 1 подписчик
- вчера
- 40 просмотров
0

ответов
Показать ещё Загружается…

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать сложный сервис на Django

25 апр. 2024, в 12:03

75000 руб./за проект

Помощь СММ-специалиста

25 апр. 2024, в 11:49

25000 руб./за проект

Помощь с СЕРМ

25 апр. 2024, в 11:37

40000 руб./за проект

Скорее всего дело в масштабирование в системе
Как альтернативное решение (через transform: skew/skewX):
<div> <p>Some not so long text</p> </div>

div { width: 400px; height: 50px; background-color: orange; transform: skewX(-45deg); } p { text-align: center; line-height: 50px; font-size: 28px; color: #fff; transform: skewX(45deg); }

Answer 1 · 2018-04-17 14:19:43

Максим Тимофеев @webinar Куратор тега Веб-разработка

Учим yii: https://youtu.be/-WRMlGHLgRg

Рендер не совершенен. Сделайте небольшой наезд. Или юзайте svg для таких элементов.

Ответ написан более трёх лет назад

Комментировать

Откуда берется пробел между элементом и псевдоэлементом (на планшете/мобилках)?

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

Минуточку внимания

Войдите на сайт