img - title label html

¿Por qué CSS no admite relleno negativo?

Question

He visto esto muchas veces que la posibilidad de un relleno negativo puede ayudar a que el desarrollo de CSS de ciertos elementos de la 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.

ACTUALIZAR

Como veo, por ejemplo, en caso de que esté usando una fuente que tenga algo, digamos, 20 píxeles de espaciado vertical, y desee aplicar un borde discontinuo en la parte inferior de la fuente, diga 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

¿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 2

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

El relleno negativo haría que el borde colapsara en el contenido (ver la página del 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

Esto podría ayudar, por cierto:

La propiedad de CSS de tamaño de caja se utiliza para modificar el modelo de caja de CSS predeterminado utilizado para calcular los anchos y las alturas de los elementos.

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

Answer 4

Hace poco respondí una pregunta diferente donde discutí por qué el modelo de caja es como es.

Hay 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 reducir el fondo del contenedor, debe hacer que el contenedor principal tenga el tamaño correcto y otorgue al elemento secundario algunos márgenes negativos. En este caso, el contenido no se está rellenando , se está desbordando.

Answer 5

La instalación de un iframe 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é el negative padding sería útil e impresionante.

Como todos los desarrolladores de CSS sabemos, alinear verticalmente un div dinámicamente de tamaño dentro de otro es una molestia, y en su mayor parte, se ve como imposible solo mediante CSS. La incorporación de negative padding podrí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 div interno dentro del div externo:

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

Permíteme explicarte ...

Colocando de forma absoluta 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 porcentaje es relativo a las dimensiones internas del elemento principal .

El relleno basado en porcentajes , por otro lado, se basa en las dimensiones internas del elemento objetivo . 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 aún así permitimos que la dimensión de altura del div interno sea dinámica.

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

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

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

Cuando html fue diseñado, a las revistas les encantó el texto que se volvía alrededor de las imágenes en ese momento, ahora odiamos porque hoy tenemos tendencias táctiles, y nos 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 así como margin-top: fill; o margin: average 0; 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 elementos futuros para pintar, pero NUNCA vuelve a elementos ya pintados.

Es por eso que (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 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 deben usar pocos recursos (para que quepan en todos los dispositivos). posible) y ser desplazado 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 delante y olvidándose de un elemento una vez dibujado, por ahora parece ser un MUST.