¿Por qué CSS no admite el relleno negativo?

Question

He visto muchas veces que la posibilidad de un relleno negativo puede ayudar a que el desarrollo de CSS de ciertos elementos de página sea cada vez más fácil. Sin embargo, no hay ninguna disposición para un relleno negativo en el W3C CSS. 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

Tal como lo veo, por ejemplo, en caso de que utilice una fuente que tiene algo, digamos, un 20 píxeles de separación vertical, y desea aplicar un borde punteado a la parte inferior de la fuente , digamos cuando aparece un hipervínculo. En tales casos, encontrará que el estilo es demasiado lamentable, ya que el borde punteado aparecerá 20 píxeles por debajo de la palabra especificada. si usa un margen negativo, no va a funcionar, ya que el margen altera el área fuera de las fronteras. El relleno negativo puede ayudar en tales situaciones.

Answer 1

Recientemente answered a different question donde hablo por qué el modelo de caja es la forma en que es.

Existen razones específicas para cada parte del modelo de caja. El acolchado está destinado a extender el fondo más allá de su contenido. Si necesita encoger el fondo del contenedor, debe hacer que el contenedor primario tenga el tamaño correcto y le dé al elemento secundario algunos márgenes negativos. En este caso, el contenido no está siendo con relleno, está desbordando.

Answer 2

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

El relleno negativo haría que el borde colapsara en el contenido (consulte la página box-model en w3) - esto haría que el área de contenido fuera más pequeña que el contenido, lo cual no tiene sentido.

Answer 3

¿Cuál sería el propósito del relleno negativo? El relleno se utiliza para reducir el contenido en su cuadro dejando espacio entre el borde y el contenido. A menos que el propósito sea sacar el contenido de su caja más allá de sus límites, lo que no creo que sea útil. Puede ser que alguien tenga una opinión diferente.

Answer 4

Esto podría ayudar, por cierto:

La propiedad CSScuadro de dimensionamiento se utiliza para modificar el modelo de caja CSS predeterminado que se utiliza para calcular anchuras y alturas de los elementos.

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

Answer 5

Montaje 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.

Answer 6

Me gustaría describir un muy buen ejemplo de por qué negative padding sería útil e impresionante.

Como todos los desarrolladores de CSS sabemos, la alineación vertical de un div dinámicamente dimensionado dentro de otro es una molestia, y en su mayor parte, vista como imposible solo mediante CSS. La incorporación de negative padding podría cambiar esto.

Por favor revise el código HTML siguiente:

<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, que sería capaz de centrar verticalmente el contenido del interior div en el exterior div:

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

me permita que pase explique ...

Posicionamiento absoluto de la parte superior div interior al 50% coloca el borde superior de la división interna en el centro de la parte exterior div. Bastante simple. Esto se debe a que el posicionamiento basado en porcentaje de es relativo a las dimensiones internas del elemento principal.

Porcentaje de relleno basado, por otro lado, se basa en las dimensiones interiores del elemento apuntado. Entonces, aplicando la propiedad de padding-top: -50%;, hemos desplazado el contenido del div interno hacia arriba una distancia del 50% de la altura del contenido del div interno, por lo tanto, centramos el contenido del div interno dentro del div externo y permitiendo aún 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 truco. lol. O bien, deberían arreglar la funcionalidad de vertical-align y darnos una versión de vertical-align que funcione en todos los elementos.

Answer 7

Se preguntó por qué, no cómo hacer trampa:

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

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

En este caso, creo que no se ha implementado debido a la misma razón que hace que CSS carece de un pseudo-selector :parent: Para evitar las evaluaciones de bucle.

Sin ser ingeniero, puedo ver que CSS ahora está hecho para pintar elementos una vez, recuerda algunas propiedades para que los elementos futuros se pinten, pero NUNCA vuelve a elementos ya pintados.

Por eso (supongo) el relleno se calcula en el ancho, porque ese es el valor que estaba disponible en el momento de comenzar a pintarlo.

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

Uno de los requisitos de las páginas web es que están disponibles rápidamente, a diferencia de una aplicación que puede tomar su tiempo y comer los recursos de la computadora para corregir todo antes de mostrarla, las páginas web necesitan pocos recursos (por lo tanto, caben en cada dispositivo posible) y se desplazan en un abrir y cerrar de ojos.

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

Así que pintando y calculando hacia adelante y olvidándose de un elemento una vez dibujado, por ahora parece ser un MUST.