Как убрать отступы между элементами при применении 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/

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

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;
}

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

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

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

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

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

HTML

+3 ещё

Простой
Почему появляется горизонтальная прокрутка на мобильном (overflow включен)?
- 1 подписчик
- час назад
- 18 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 194 просмотра
2

ответа
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 23 нояб.
- 109 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 23 нояб.
- 111 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- 22 нояб.
- 80 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 65 просмотров
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 101 просмотр
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 89 просмотров
2

ответа
HTML

+1 ещё

Простой
Как разместить элементы с разных блоков, чтобы они перекрывали друг друга?
- 1 подписчик
- 21 нояб.
- 61 просмотр
1

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Trainee - IT Support

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

от 2 000 до 4 000 $

Текст из фотографии в отдельный файл

26 нояб. 2024, в 04:41

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

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

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

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

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

никак, там нет отступов
что вы хотите получить в конечном итоге, зачем вам 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?

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

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

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