Как сделать одинаковые отступы между всеми элементами?

Question

[DTX]

Сейчас между строками получается двойной.
https://jsfiddle.net/DTX_/bLbc377j/

Answer 1

[DTX]

Как у вас всё сложно, господа..
Не хотел, конечно, flex тянуть, но чтобы не мучиться с пробелами между inline-блоками, пришлось..
https://jsfiddle.net/DTX_/bLbc377j/

Comments

[Алексей Струков]

А что там сложного? У инпутов просто есть боковые маргины пару пиксей вроде. Тебе надо сделать у всех элементов одинаковый маргин и все будет замечательно.

[Сергей Горячев]

Как раз с флексами сложней. Отступ у inline-block гарантировано убирается через margin-left: -0.25em, потом это же значение докидываешь в padding родителя. Всего лишь работа с границами) По количеству кода у меня меньше строк)

[Сергей delphinpro]

Sergey Goryachev: Гарантированно, говорите? Не занимайтесь ерундой, и не советуйте говно-решения...
https://jsfiddle.net/mfwoejnh/ - это вам для размышления.

[Сергей Горячев]

Сергей: честно говоря, даже не совсем понимаю, что у вас там происходит на фиддле. но обязательно посмотрю и подумаю. это решение пока еще ни разу не подводило)

[Сергей delphinpro]

Sergey Goryachev: Да я вам и так скажу. Самому лень формулировать, приведу цитату с одного популярного ресурса:

Одна из главных вещей, которые вы должны знать, это то, что inline-block — является по сути обычной буквой — символом, т.е. весь наш строчный блок составляет всего лишь одну букву в строке, одну единицу. [...] Ну и соответственно, если рядом с inline-block не будет пробелов, то расстояние между ним и соседними буквами будет обычный межбуквенный интервал (трекинг), которым можно управлять (кернинг). Если есть пробелы — до соседней буквы будет этот же интервал плюс ширина пробела.

Ширина пробела и межбуквенный интервал! Это шрифто-зависимые величины. Да, на определенных шрифтах ваше так называемое magic number (-0.25em) будет работать. Но если вы поменяете шрифт, или letter-spacing, или еще что-то в шрифте, вся верстка развалится.
Не используйте "магические числа" в css. Используйте более надежные методы.

ЗЫ. Ну ладно. Верстка может быть и не развалится. Но определенные риски присутствуют, это ненадежно, непонятно сходу, для каждого шрифта нужно подбирать своё магическое число и результат может отличаться в разных браузерах, по разному рендерящих шрифты. В общем, это самый наихудший способ избавиться от промежутков между строчными блоками.

[DTX]

Алексей Струков: сложности возникают из-за пробелов между inline-элементами..
Потом возникают странные разметки типа
.wrapper padding: 0 5px 5px 10px;
.element margin: 5px 5px 0 -0.25em;

Про 0.25 уже сказали. Чтобы сделать границу в 1px надо ещё повозиться. А на флексе будет просто
.wrapper padding: 0px 1px 1px 0px;
.element margin: 1px 0px 0px 1px;

[Алексей Струков]

DirecTwiX: а просто margin: 1px; не проще?

[DTX]

Алексей Струков: для внутренних элементов? Тогда между ними будет 2px.

[Алексей Струков]

DirecTwiX: не будет. Там вертикальные маргины суммируются. Хотя во флексе вроде поведение margin collapse немного другое, но в данном случае должно работать

[DTX]

Алексей Струков: https://jsfiddle.net/DTX_/p16pemkz/1/
Мб заодно сможешь помочь решить проблемку) Надо чтобы первый блок не залезал за края родитльского при уменьшении последнего.
i.imgur.com/etlO4DD.png
Пробовал и overflow применять, и flex-shrink..

[Алексей Струков]

DirecTwiX: 1 пиксель маловато для маргина, 2 будет красивей думаю)
По второму вопросу, у тебя там фиксированная высота стоит у родителя?

[Алексей Струков]

DirecTwiX: добавил паддинг, теперь все работает правильно

[DTX]

Алексей Струков: 1px это для проверки)
> добавил паддинг, теперь все работает правильно
Куда смотреть?)

Со вторым впросом разаборлся. Надо крестик вынести направо через position: absolute; к блоку довить padding--right, а к текстк - overflow: hidden

[Алексей Струков]

DirecTwiX: там есть еще один вариант. Крестик выносить это правильно конечно. Вот вариант с добавленным паддингом и небольшой эффект на текст в виде text-overflow - https://jsfiddle.net/qxw3ju3L/

[DTX]

Алексей Струков: везде двойной отступ) в принципе, имеет право на жизнь
Вот мой, с полноценным эффектом.. В первой строке)
https://jsfiddle.net/DTX_/bLbc377j/

Answer 2

[Алексей Струков]

https://jsfiddle.net/bLbc377j/2/
ня )

Comments

[Сергей Горячев]

Ща мы втроем какой-нибудь проект сверстаем)))

[Алексей Струков]

Sergey Goryachev: срочно организовываем стартап и в америку )

[Сергей Горячев]

Алексей Струков: для начала старт-апа нужно настроить мой gulp. Я уже две недели бьюсь)))

[Алексей Струков]

Sergey Goryachev: а что там настраивать то? напиши мне на почту (в профиле есть) я тебе вышлю рабочий файл

[Сергей Горячев]

Алексей Струков: рабочих примеров я уже насмотрелся много( у меня больше проблема, чтобы подружить желаемые плагины с joomla, и чтобы все работало. По отдельности могу запустить, а общим таском никак)))

[Алексей Струков]

Sergey Goryachev: я к сожалению с joomla не знаком. у меня есть рабочий gulpfile.js для sass js и прочие плюшки типа минификаторов и ливрелоадов

[Сергей Горячев]

Алексей Струков: А вообще пришли, может проще привыкнуть к чужой настройке, чем еще месяц просидеть над своим. Пути для джумлы я перепишу это не проблема.

[Сергей Горячев]

Алексей Струков: Хотя если там нет browserSync, то мне это сильно осложнит жизнь, к нему я уже привык) Я уже проект на Фрилансим кинул, может кто-то поможет настроить по моим требованиям) Да на вопросы поотвечает)))

[Алексей Струков]

Sergey Goryachev: browsersync там есть как раз) ща отправлю

[Сергей Горячев]

Алексей Струков: спасибо. Кстати, если заинтересует))) freelansim.ru/tasks/141464

[Алексей Струков]

Sergey Goryachev: Я к сожалению не силен в Галпе. Настроил его себе давно и забыл как страшный сон. Не сторонник я всех этих консольных сборщиков, но пришлось сделать, хотя и не пользуюсь особо, ибо программирование у меня просто хобби а не работа.

[Сергей Горячев]

Алексей Струков: значит я не один такой?) я думал что только у меня не получается толком его настроить)))))

[Алексей Струков]

Sergey Goryachev: ну там не сложно, просто много противоречивой информации и копаться в ней лень. Надо писать код. Все остальное только отвлекает. Незнаю откуда эта мода пошла сейчас разбираться во всех новых технологиях, и ставить себе все плагины, до которых руки могут дотянуться.

[Сергей Горячев]

Алексей Струков: в целом, посмотрел файлик, ничего сложного оказалось. пути переписал. но одного плагина нет. хотя это я наверно сделаю. мне еще нужен плагин, который js будет в кучу собирать. а еще из вашего файлика узнал, что я в принципе делал многое неправильно...

[Алексей Струков]

Sergey Goryachev: там у меня есть таск для сборки js. Посмотри название этого пакета и скачай. Вроде работает он нормально, либо если какой другой нравится то замени на свой)

[Сергей Горячев]

Алексей Струков: скачал, попробовал, но он собирает "в кучу", а мне критично, чтобы jquery Был первый. а некоторые вообще не нужны. наверно это настроить можно, попробую почитать доки)

[Алексей Струков]

Sergey Goryachev: jquery у вас локально находится на диске? Поидее там можно задать порядок в котором он будет обьединять файлы. В описании к плагину скорее всего это есть.

[Сергей Горячев]

Алексей Струков: угу, не использую я CDN, да кроме jQuery много чего нужно выводить раньше main. Плагины тоже до объявления нужно вызывать. Почитаю. Спасибо еще раз. Быть может это и правда сократит время изучения всяких страшностей))))

Answer 3

[Сергей Горячев]

https://jsfiddle.net/webirus/bLbc377j/3/
С точными размерами поиграйтесь сами.