Почему CSS не поддерживает отрицательные отступы?


125

Я много раз видел, что перспектива отрицательного заполнения может помочь в разработке CSS определенных элементов страницы, которые становятся лучше и проще. Тем не менее, в CSS W3C нет положения для отрицательного заполнения. В чем причина этого? Есть ли какие-либо препятствия на пути к собственности, препятствующие ее использованию как таковой? Спасибо за ответы.

ОБНОВЛЕНИЕ

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


27
потому что отрицательные отступы не имеют смысла
Петах

1
Это то же самое, что и в HTML, созданном Frontpage. Это вроде как работает, но при проверке выдает кучу ошибок. Отрицательный отступ не является частью спецификации, но все же поддерживается браузерами.
Линус Клин

9
Многим нужен пример. Вот моя, и почему я бы предпочел отрицательную прокладку. Используя функцию border-image, вы можете захотеть, чтобы граница изображения слегка перекрывала текст (например, если вы делаете выделенный глянцевый пузырь, очень популярный в Интернете в те дни;))
Himmators

81
Если что-то «не имеет смысла» для кого-то, это не оправдание для того, чтобы мешать кому-то другому.
Rolf

1
Я пытаюсь отобразить код в <span>теге, и при его анализе возникают дополнительные разрывы строк в начале блока кода. С помощью отрицательного отступа я мог бы убрать это лишнее пространство.
Steven Lu

Ответы:


86

Недавно я ответил на другой вопрос, в котором обсуждал, почему коробочная модель такая, какая она есть.

У каждой части коробочной модели есть свои причины. Padding предназначен для расширения фона за пределы его содержимого. Если вам нужно уменьшить фон контейнера, вы должны сделать родительский контейнер правильного размера и дать дочернему элементу отрицательные поля. В этом случае контент не дополняется , он переполняется.


2
Спасибо, приятель. Это дает мне удовлетворительную причину. Приветствия. :)
ikartik90

11
Что делать, если вы хотите уменьшить границу ближе к тексту, например, когда вы используете изображение границы.
Himmators

5
иногда нецелесообразно редактировать CSS всех дочерних элементов контейнера. У вас может быть общий CSS, который применяется к этим элементам во всем документе, и вы не хотите, например, изменять его для содержимого определенного контейнера.
Rolf

15
Эх, причина, но я бы не назвал ее удовлетворительной. Это тот случай, когда спецификация выходит за рамки того, чтобы сказать мне, как определить мою страницу, и начинает говорить мне, как я должен определить свою страницу. Если я хочу, чтобы мой контент перекрывал края фона, границы и / или поля, это должно быть моей прерогативой, невзирая на воображение разработчиков спецификаций, почему я мог бы захотеть это сделать. Извините, меня немного раздражает то, что мне приходится добавлять синтаксический мусор или, что еще хуже, одноцветные изображения шириной в один пиксель, чтобы получить разделитель определенного размера, который меньше высоты текста и центрирован по вертикали.
Джейсон

1
@zzzzBov, я почувствовал, что это актуально из-за приведенного в конце примера того, почему я хотел бы сделать такую ​​вещь, что является частым вопросом в комментариях на этой странице. По общему признанию, моя лошадь была немного высока до этого момента.
Джейсон

4

Заполнение по определению - это положительное целое число (включая 0).

Отрицательное заполнение приведет к сжатию границы в содержимое (см. Страницу блочной модели на w3) - это сделает область содержимого меньше содержимого, что не имеет смысла.


37
Граница, схлопывающаяся в контент, - это именно тот эффект, который нужен. Вы знаете какой-нибудь другой способ получить такой эффект?
Rolf

4
Согласился с Рольфом. Я вижу, вы, Одед, очевидно, не занимаетесь сложным экспериментальным дизайном. Используя отрицательные отступы и границы, не имея возможности использовать явные значения пикселей, практически невозможно получить аналогичные результаты. Насколько я знаю, вам понадобится несколько вложенных элементов, чтобы добиться того же, однако в некоторых случаях все становится немного сложнее.
Yeti

4

Я хотел бы описать очень хороший пример того, почему negative padding было бы полезно и круто.

Как все мы, разработчики CSS, знаем, что вертикальное выравнивание одного div с динамическим изменением размера внутри другого является проблемой и по большей части считается невозможным только с использованием CSS. Включениеnegative padding может изменить это.

Просмотрите следующий HTML-код:

<div style="height:600px; width:100%;">
    <div class="vertical-align" style="width:100%;height:auto;" >
        This DIV's height will change based the width of the screen.
    </div>
</div>

С помощью следующего CSS мы могли бы вертикально центрировать содержимое внутреннего divвнутри внешнегоdiv :

.vertical-align {
    position: absolute;
    top:50%;
    padding-top:-50%;
    overflow: visible;
}

Позвольте мне объяснить ...

Абсолютное позиционирование вершины внутреннего div на 50% помещает верхний край внутреннего div в центр внешнего div. Довольно просто. Это связано с тем, что позиционирование на основе процентов относится к внутренним размерам родительского элемента. .

С другой стороны, отступы на основе процентов основаны на внутренних размерах целевого элемента . Итак, применив свойство, padding-top: -50%;мы сместили содержимое внутреннего div вверх на расстояние 50% от высоты содержимого внутреннего div, таким образом центрируя содержимое внутреннего div внутри внешнего div и прежнему разрешая измерение высоты внутренний div должен быть динамичным!

Если вы спросите меня OP, это был бы лучший вариант использования, и я думаю, что его следует реализовать, чтобы я мог сделать этот хак. ржунимагу. Или они должны просто исправить функциональность vertical-alignи предоставить нам версию, vertical-alignкоторая работает со всеми элементами.


1
Да, но для этой цели я бы предпочел иметь новые атрибуты для элементов html, а не перехватывать поведение других атрибутов. В вашем примере требуется новый атрибут inner-top; как верхний атрибут относительно позиционированного элемента, но относительно себя, а не родителя. Еще одно хорошее использование отрицательного отступа - создание элемента, пропорционального его ширине, заполнение 100% -ным заполнением, но позволяющее элементу расти по вертикали, если его переполняет больше контента, что невозможно, если контент находится в дополнительном родственнике abs-pos. Отрицательное заполнение вернет элемент со свернутым заполнением к его размеру.
sergio

в 2018 центрирование так же просто, как использование гибкого дисплея с выравниванием содержимого и выравниванием элементов ... 3 строки кода для идеального центрирования div.
kaiser


1

Вы спросили ПОЧЕМУ, а не как его обмануть:

Обычно из-за лени программистов начальной реализации, потому что они уже приложили гораздо больше усилий для других функций, предоставляя более странные побочные эффекты, такие как поплавки, потому что они тогда больше требовались дизайнерами, но они не нашли времени чтобы разрешить это, чтобы мы могли использовать ЧЕТЫРЕ свойства, чтобы подтолкнуть / тянуть элемент против его соседей (теперь у нас есть только четыре для нажатия и только 2 для вытягивания).

Когда разрабатывался html, журналы любили переформатировать текст вокруг изображений, а теперь ненавидят, потому что сегодня у нас есть сенсорные тенденции, и любят скучные вещи с большим количеством места и не для чтения. Вот почему они оказывают большее давление на поплавки, чем на центрирование, или они могли бы придумать что-то вроде margin-top: fill;илиmargin: average 0; просто выровнять контент по низу, или распределить его дополнительное пространство вокруг.

В данном случае я думаю, что он не был реализован по той же причине, по которой в CSS отсутствует :parentпсевдоселектор: для предотвращения циклических вычислений.

Не будучи инженером, я могу видеть, что CSS прямо сейчас предназначен для однократного рисования элементов, запоминания некоторых свойств для рисования будущих элементов, но НИКОГДА не возвращаться к уже окрашенным элементам.

Вот почему (я думаю) отступ рассчитывается по ширине, потому что это значение, которое было доступно на момент начала рисования.

Если бы у вас было отрицательное значение для заполнения, это повлияло бы на внешние пределы, которые УЖЕ были определены, когда маржа уже была установлена. Я знаю, что еще ничего не нарисовано, но когда вы читаете, как идет процесс рисования, созданного гениями с помощью технологий 90-х, мне кажется, что я задаю глупые вопросы и просто говорю «спасибо», хе-хе.

Одно из требований к веб-страницам заключается в том, чтобы они были быстро доступны, в отличие от приложения, которое может не торопиться и потреблять ресурсы компьютера, чтобы все было правильно, перед его отображением, веб-страницы должны использовать мало ресурсов (поэтому они подходят для любого устройства. возможно) и прокручиваться на одном дыхании.

Если вы видите приложения со сложной перекомпоновкой и позиционированием, такие как InDesign, вы не можете прокручивать так быстро! Чтобы перейти к следующей странице, требуются большие усилия как процессору, так и графической карте!

Так что рисовать и просчитывать вперед и забывать об элементе, который когда-то был нарисован, сейчас, кажется, ОБЯЗАТЕЛЬНО.


0

Установка iframe внутри контейнеров не будет соответствовать размеру контейнера. Добавляет около 20 пикселей отступа. В настоящее время нет простого способа исправить это. Вам нужен javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Отрицательные поля были бы простым решением.


0

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

Да, это все еще актуально для CSS3 в 2019 году; Показательный пример: макеты flexbox. Поля элементов Flexbox не сжимаются, поэтому для того, чтобы равномерно распределить их и выровнять по визуальному краю контейнера, необходимо вычесть поля элементов из заполнения их контейнера. Если какой-либо результат <0, вы должны использовать отрицательное поле для контейнера или суммировать это отрицательное значение с существующим запасом. То есть содержимое элемента влияет на то, как для него определяются поля, то есть наоборот. Суммирование не работает чисто, когда у содержимого гибких элементов поля определены в разных единицах или на них влияет другой размер шрифта и т. Д.

В приведенном ниже примере в идеале должны быть выровненные и равномерно расположенные серые прямоугольники, но, к сожалению, это не так.

body {
  font-family: sans-serif;
  margin: 2rem;
}
body > * {
  margin: 2rem 0 0;
}
body > :first-child {
  margin-top: 0;
}
h1,
li,
p {
  padding: 10px;
  background: lightgray;
}
ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;/* just to reset */
  padding: -5px;/* would allow correct alignment */
}
li {
  flex: 1 1 auto;
  margin: 5px;
}
<h1>Cras facilisis orci ligula</h1>

<ul>
  <li>a lacinia purus porttitor eget</li>
  <li>donec ut nunc lorem</li>
  <li>duis in est dictum</li>
  <li>tempor metus non</li>
  <li>dapibus sapien</li>
  <li>phasellus bibendum tincidunt</li>
  <li>quam vitae accumsan</li>
  <li>ut interdum eget nisl in eleifend</li>
  <li>maecenas sodales interdum quam sed accumsan</li>
</ul>

<p>Fusce convallis, arcu vel elementum pulvinar, diam arcu tempus dolor, nec venenatis sapien diam non dui. Nulla mollis velit dapibus magna pellentesque, at tempor sapien blandit. Sed consectetur nec orci ac lobortis.</p>

<p>Integer nibh purus, convallis eget tincidunt id, eleifend id lectus. Vivamus tristique orci finibus, feugiat eros id, semper augue.</p>

За прошедшие годы я столкнулся с достаточным количеством этих небольших проблем, когда небольшое отрицательное дополнение могло иметь большое значение, но вместо этого я вынужден добавлять несемантическую разметку, использование calc()или препроцессоры CSS, которые работают только тогда, когда единицы одинаковы. , и т.д.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.