Как убрать отступы между элементами при применении transform scale?

Question

Никита @MiiZZo

JavaScript, React, NodeJS, Student

CSS

Как убрать отступы между элементами при применении transform scale?

<container>
    <child></child>
    <child></child>
    <child></child>
    <child></child>
  </container>

container {
  display: block;
  background: yellow;
  width: 200px;
}

child {
  display: block;
  width: 220px;
  height: 100px;
  background: red;
  margin: 10px;
  transform: scale(0.5);
}

Этот же код на jsfiddle(песочница): https://jsfiddle.net/xsfytveb/

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

9 комментариев

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

Александр @z80b

никак, там нет отступов
что вы хотите получить в конечном итоге, зачем вам transform: scale там понадобился?

Написано более трёх лет назад
Никита @MiiZZo Автор вопроса

Александр, это не отступы?

Написано более трёх лет назад
Никита @MiiZZo Автор вопроса

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

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

Никита, Задавать каждому translateY(-100%), посчитав на JS.

Или объясните суть всей задачи, потому что сейчас она выглядит крайне странной.

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

просто не используйте transform для вёрстки, он не для этого

Написано более трёх лет назад
Никита @MiiZZo Автор вопроса

Александр, альтернативы?

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

Александр @z80b

padding и margin разве не достаточно:

container {
  display: block;
  background: yellow;
  width: 200px;
  padding: 30px 0;
}

child {
  display: block;
  width: 110px;
  height: 50px;
  background: red;
  margin: 0 auto 30px;
}

child:last-child {
  margin: 0 auto;
}

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

Никита @MiiZZo Автор вопроса

Александр, дочерние элементы нужно уменьшить в масштабе, многие из них будут больше родителя.

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

Александр @z80b

Никита, Сложно понять, что должно быть в конечном счете, возможно вот так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <container>
    <child class="small">
      <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
    </child>
    <child class="big">
      <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio
      qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio
      qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
    </child>
    <child class="small">
      <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
    </child>
    <child class="small">
      <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content>
    </child>
  </container> 
</body>
</html>

container {
  display: block;
  background: yellow;
  width: 200px;
  padding: 30px 0;
}

child {
  position: relative;
  display: block;
  width: 110px;
  height: 50px;
  background: red;
  margin: 0 auto 10px;
}

child:last-child {
  margin: 0 auto;
}

content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 9px;
}

.big content {
  transform: scale(1, 0.5);
  transform-origin: top left;
}

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

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

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

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

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

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

CSS

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

ответ
HTML

+1 ещё

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

ответа
JavaScript

+4 ещё

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

ответов
CSS

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

ответ
HTML

+1 ещё

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

ответа
CSS

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

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 23 апр.
- 708 просмотров
2

ответа
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- 23 апр.
- 2305 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 22 апр.
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- 22 апр.
- 211 просмотров
4

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

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Разработка страницы "Создание данныых"

25 апр. 2024, в 11:20

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

Разработка одностраничника

25 апр. 2024, в 11:02

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

Фронт мобильное приложение

25 апр. 2024, в 10:42

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

никак, там нет отступов
что вы хотите получить в конечном итоге, зачем вам transform: scale там понадобился?
Александр, дочерние элементы могут быть больше родителя, намного больше, их нужно отобразить в списке.
Никита, Задавать каждому translateY(-100%), посчитав на JS.

Или объясните суть всей задачи, потому что сейчас она выглядит крайне странной.
просто не используйте transform для вёрстки, он не для этого
padding и margin разве не достаточно:

container { display: block; background: yellow; width: 200px; padding: 30px 0; } child { display: block; width: 110px; height: 50px; background: red; margin: 0 auto 30px; } child:last-child { margin: 0 auto; }
Александр, дочерние элементы нужно уменьшить в масштабе, многие из них будут больше родителя.
Никита, Сложно понять, что должно быть в конечном счете, возможно вот так:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <container> <child class="small"> <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content> </child> <child class="big"> <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content> </child> <child class="small"> <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content> </child> <child class="small"> <content>qdhoiqdhw qwdhqwoidh ihqdwiodh oiqhwdioqwhd qwihdioqwhdi oiqwhdiohqdio</content> </child> </container> </body> </html>

container { display: block; background: yellow; width: 200px; padding: 30px 0; } child { position: relative; display: block; width: 110px; height: 50px; background: red; margin: 0 auto 10px; } child:last-child { margin: 0 auto; } content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 9px; } .big content { transform: scale(1, 0.5); transform-origin: top left; }

Как убрать отступы между элементами при применении transform scale?

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

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

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