В спецификации CSS Box Model Module Level 4 есть интересное свойство
margin-trim. Я когда-то слышал о нём, но не придавал особого значения. Возможно, потому что оно сейчас поддерживается только в Safari 16.4+. Недавно наткнулся на короткую заметку Криса Койера и решил разобраться.Допустим, есть список, между элементами которого нужны отступы. Довольно частая задача. Первым делом на ум приходит свойство
margin, в частности margin-bottom.li {
margin-bottom: 1rem;
}Отступ будет у всех элементов списка, хотя у последнего он не нужен. Можно сделать список flex или grid-контейнером и использовать свойство
gap для отступов между элементами. Это хорошее решение, которое многие рекомендуют и которое я сам использую. Но превращать элемент в flex или grid-контейнер только ради отступов — это как забивать маленький тонкий гвоздь кувалдой. Вроде можно, но избыточно. А всё потому что у последнего элемента торчит ненужный отступ. Хотелось бы обойтись обычным
margin. Для этого есть несколько решений./* 1. отступ вниз, убрать у последнего элемента */
li {
margin-bottom: 1rem;
}
li:last-child {
margin-bottom: 0;
}
/* 2. отступ вверх, убрать у первого элемента */
li {
margin-top: 1rem;
}
li:first-child {
margin-bottom: 0;
}
/* 3. отступ вниз всем, кроме последнего элемента */
li:not(:last-child) {
margin-bottom: 1rem;
}
/* 4. отступ вверх всем, кроме первого элемента */
li:not(:first-child) {
margin-top: 1rem;
}
/* 5. отступ вверх только соседним элементам */
li + li {
margin-top: 1rem;
}
Не очень красиво, но работает. С
margin-trim можно обойтись без этого. Свойство обрезает отступы, которые находятся между дочерними элементами и краями контейнера. Принимает от одного до четырёх ключевые слов: none, block, inline, block-start, block-end, inline-start и inline-end. ul {
margin-trim: block-end;
}
li {
margin-bottom: 1rem;
}В примере обрезаются отступы дочерних элементов, которые примыкают к концу блочной оси контейнера. Иначе говоря, нижний отступ последнего элемента списка будет обрезан.
margin-trim принимает только логические значения, а значит могут возникнуть конфликты с свойствами направлений при работе с языками, где другое направление письма. В таких ситуациях лучше полностью перейти на логические свойства.Браузерная поддержка
margin-trim пока ограничена Safari. Свойство не выглядит каким-то сложным, поэтому его могут внедрить без особого шума. Как бы оно помогло строить сетки в эпоху перехода с таблиц/float на flexbox. Там приходилось применять всякие хаки с отрицательными отступами у контейнера. Ну а подробнее про margin-trim в блоге WebKit.#css
