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

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

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

Я хотел бы описать очень хороший пример того, почему 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, которая работает со всеми элементами.

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

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

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

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

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

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

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

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

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

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

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

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

Кстати, это могло бы помочь:

Свойство CSS box-sizing используется для изменения модели CSS по умолчанию, используемой для расчета ширины и высоты элементов.

http://www.w3.org/TR/css3-ui/#box-sizing
https://developer.mozilla.org/En/CSS/Box-sizing

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

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

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

Да, это все еще актуально для 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, которые работают только тогда, когда единицы измерения то же и т. д.