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

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

ОБНОВЛЕНИЕ

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

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

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

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

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

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

Это, кстати, может помочь:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Потому что у разработчиков 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, которые работают только тогда, когда единицы одинаковы. , и т.д.