¿Por qué CSS no admite relleno negativo?

He visto esto muchas veces que la posibilidad de un relleno negativo podría ayudar a que el desarrollo de CSS de ciertos elementos de la página sea mejor y más fácil. Sin embargo, no hay ninguna disposición para un relleno negativo en el CSS del W3C. Cuál es la razón detrás de esto? ¿Hay alguna obstrucción a la propiedad que impida su uso como tal? Gracias por tus respuestas.

ACTUALIZACIÓN

Como veo, por ejemplo, en caso de que esté usando una fuente que tenga algo, digamos, un espacio vertical de 20px, y desee aplicar un borde discontinuo en la parte inferior de la fuente, digamos cuando aparece un hipervínculo. En tales casos, encontrará que el estilo es demasiado descuidado, ya que el borde discontinuo aparecerá 20px debajo de la palabra especificada. si usa un margen negativo, no funcionará, ya que el margen altera el área fuera de los bordes. El relleno negativo puede ayudar en tales situaciones.

Recientemente respondí una pregunta diferente en la que discutí por qué el modelo de caja es como es.

Hay razones específicas para cada parte del modelo de caja. El relleno está destinado a extender el fondo más allá de su contenido. Si necesita reducir el fondo del contenedor, debe hacer que el contenedor primario tenga el tamaño correcto y darle al elemento secundario algunos márgenes negativos. En este caso, el contenido no se rellena , se desborda.

El relleno por definición es un entero positivo (incluido 0).

El relleno negativo haría que el borde colapsara en el contenido (vea la página del modelo de caja en w3); esto haría que el área de contenido sea más pequeña que el contenido, lo que no tiene sentido.

Me gustaría describir un muy buen ejemplo de por qué negative paddingsería útil e increíble.

Como todos los desarrolladores de CSS sabemos, alinear verticalmente un div de tamaño dinámico dentro de otro es una molestia y, en su mayor parte, se considera imposible solo usando CSS. La incorporación de negative paddingpodría cambiar esto.

Por favor revise el siguiente 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>

Con el siguiente CSS, podríamos centrar verticalmente el contenido del interior divdentro del exterior div:

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

Permíteme explicarte ...

Posicionar absolutamente la parte superior del div interno al 50% coloca el borde superior del div interno en el centro del div externo. Bastante simple. Esto se debe a que el posicionamiento basado en porcentajes es relativo a las dimensiones internas del elemento padre .

El relleno basado en porcentaje , por otro lado, se basa en las dimensiones internas del elemento objetivo . Entonces, al aplicar la propiedad de padding-top: -50%;hemos desplazado el contenido del div interno hacia arriba en una distancia del 50% de la altura del contenido del div interno, centrando así el contenido del div interno dentro del div externo y aún permitiendo la dimensión de altura del div interno para ser dinámico!

Si me preguntas OP, este sería el mejor caso de uso, y creo que debería implementarse solo para poder hacer este hack. jajaja O bien, deberían corregir la funcionalidad de vertical-aligny darnos una versión vertical-alignque funcione en todos los elementos.

Esto podría ayudar, por cierto:

La propiedad CSS de tamaño de caja se usa para alterar el modelo de caja CSS predeterminado usado para calcular anchos y alturas de elementos.

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

Preguntaste POR QUÉ, no cómo engañarlo:

Por lo general, debido a la pereza de los programadores de la implementación inicial, porque ya han puesto más esfuerzo en otras características, entregando efectos secundarios más extraños como flotadores, porque los diseñadores los solicitaron más en ese momento y aún no se han tomado el tiempo para permitir esto para que podamos usar las CUATRO propiedades para empujar / tirar de un elemento contra sus vecinos (ahora solo tenemos cuatro para empujar, y solo 2 para tirar).

Cuando se diseñó html, a las revistas les encantaba que el texto volviera a aparecer alrededor de las imágenes en ese entonces, ahora odiaban porque hoy tenemos tendencias táctiles y nos encantan las cosas con mucho espacio y nada para leer. Es por eso que ponen más presión sobre los flotadores que en el centrado, o que podría haber diseñado algo así margin-top: fill;, o margin: average 0;simplemente para alinear el contenido de la parte inferior, o distribuir su espacio adicional alrededor.

En este caso, creo que no se ha implementado debido a la misma razón que hace que CSS carezca de un :parentpseudo-selector: para evitar evaluaciones en bucle.

Sin ser ingeniero, puedo ver que CSS ahora está hecho para pintar elementos una vez, recordar algunas propiedades para pintar elementos futuros, pero NUNCA volver a elementos ya pintados.

Es por eso (supongo) que el relleno se calcula sobre el ancho, porque ese es el valor que estaba disponible al momento de comenzar a pintarlo.

Si tuviera un valor negativo para el relleno, afectaría los límites exteriores, que YA se han definido cuando el margen ya se ha establecido. Lo sé, todavía no se ha pintado nada, pero cuando lees cómo va el proceso de pintura, creado por genios con tecnología de los años 90, siento que estoy haciendo preguntas tontas y solo digo "gracias", jeje.

Uno de los requisitos de las páginas web es que estén rápidamente disponibles, a diferencia de una aplicación que puede tomar su tiempo y consumir los recursos de la computadora para hacer que todo esté correcto antes de mostrarla, las páginas web necesitan usar pocos recursos (para que quepan en cada dispositivo posible) y desplazarse en una brisa.

Si ve aplicaciones con reflujo y posicionamiento complejos, como InDesign, ¡no puede desplazarse tan rápido! ¡Se necesita un gran esfuerzo tanto de los procesadores como de la tarjeta gráfica para pasar a las páginas siguientes!

Por lo tanto, pintar y calcular hacia adelante y olvidarse de un elemento una vez dibujado, por ahora parece ser IMPRESCINDIBLE.

La instalación de un marco flotante dentro de los contenedores no coincidirá con el tamaño del contenedor. Agrega aproximadamente 20px de relleno. Actualmente no hay una manera fácil de arreglar esto. Necesita javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Los márgenes negativos serían una solución fácil.

Debido a que los diseñadores de CSS no tenían la previsión de imaginar la flexibilidad que esto traería. Hay muchas razones para expandir el área de contenido de un cuadro sin afectar su relación con los elementos vecinos. Si cree que no es posible, coloque un nowraptexto largo en un cuadro, establezca un ancho en el cuadro y observe cómo el contenido desbordado no hace nada al diseño.

Sí, esto sigue siendo relevante con CSS3 en 2019; caso en cuestión: diseños de flexbox. Los márgenes de los elementos de Flexbox no se contraen, por lo que para espaciarlos de manera uniforme y alinearlos con el borde visual del contenedor, uno debe restar los márgenes de los elementos del relleno de su contenedor. Si algún resultado es <0, debe usar un margen negativo en el contenedor, o sumar ese negativo con el margen existente. Es decir, el contenido del elemento afecta cómo se definen los márgenes para él, que es al revés. La suma no funciona correctamente cuando el contenido de los elementos flexibles tiene márgenes definidos en diferentes unidades o se ve afectado por un tamaño de fuente diferente, etc.

El siguiente ejemplo debería, idealmente, tener cuadros grises alineados y espaciados uniformemente, pero lamentablemente no lo son.

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>

Me he encontrado con muchos de estos pequeños problemas a lo largo de los años en los que un poco de relleno negativo habría sido muy útil, pero en cambio me veo obligado a agregar calc()preprocesadores de marcado, uso o CSS no semánticos que solo funcionan cuando las unidades son las mismas etc.