Por que o CSS não suporta preenchimento negativo?

Eu já vi isso muitas vezes que a perspectiva de um preenchimento negativo pode ajudar o desenvolvimento de CSS de certos elementos da página a tornar-se melhor e mais fácil. No entanto, não há previsão de preenchimento negativo no CSS do W3C. Qual é a razão por trás disso? Existe alguma obstrução à propriedade que impeça seu uso como tal? Obrigado por suas respostas.

ATUALIZAÇÃO

Como eu vejo, por exemplo, se você estiver usando uma fonte com algo, digamos, 20 pixels de espaçamento vertical, e desejar aplicar uma borda tracejada na parte inferior da fonte, diga quando um hiperlink aparecer. Nesses casos, você achará o estilo muito pobre, pois a borda tracejada aparecerá 20px abaixo da palavra especificada. se você usar margem negativa, não funcionará, pois a margem altera a área fora das fronteiras. O preenchimento negativo pode ajudar nessas situações.

Recentemente, respondi a uma pergunta diferente, onde discuti por que o modelo de caixa é do jeito que é.

Existem motivos específicos para cada parte do modelo de caixa. O preenchimento deve estender o plano de fundo além do seu conteúdo. Se você precisar reduzir o plano de fundo do contêiner, faça com que o contêiner pai tenha o tamanho correto e dê ao elemento filho algumas margens negativas. Nesse caso, o conteúdo não está sendo preenchido , está transbordando.

O preenchimento por definição é um número inteiro positivo (incluindo 0).

O preenchimento negativo faria com que a borda fosse recolhida no conteúdo (consulte a página do modelo da caixa na w3) - isso tornaria a área de conteúdo menor que o conteúdo, o que não faz sentido.

Gostaria de descrever um bom exemplo de por negative paddingque seria útil e impressionante.

Como todos nós desenvolvedores de CSS sabemos, alinhar verticalmente uma div de dimensionamento dinâmico dentro de outra é um aborrecimento e, na maioria das vezes, visto como impossível apenas usando CSS. A incorporação de negative paddingpoderia mudar isso.

Revise o seguinte 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>

Com o seguinte CSS, poderíamos centralizar verticalmente o conteúdo do interior divdentro do exterior div:

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

Permita-me explicar ...

O posicionamento absoluto da parte superior da div interna em 50% coloca a borda superior da div interna no centro da div externa. Bem simples. Isso ocorre porque o posicionamento baseado em porcentagem é relativo às dimensões internas do elemento pai .

O preenchimento baseado em porcentagem , por outro lado, é baseado nas dimensões internas do elemento de destino . Portanto, aplicando a propriedade de padding-top: -50%;, alteramos o conteúdo da div interna para cima em uma distância de 50% da altura do conteúdo da div interna, centralizando o conteúdo da div interna na div externa e ainda permitindo a dimensão da altura da div. div interno para ser dinâmico!

Se você me perguntar OP, este seria o melhor caso de uso, e acho que deve ser implementado apenas para que eu possa fazer esse hack. ri muito. Ou eles devem apenas corrigir a funcionalidade vertical-aligne fornecer uma versão vertical-alignque funcione em todos os elementos.

Isso poderia ajudar, a propósito:

A propriedade CSS de tamanho de caixa é usada para alterar o modelo de caixa CSS padrão usado para calcular larguras e alturas de elementos.

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

Você perguntou por que, não como trapacear:

Geralmente, devido à preguiça dos programadores da implementação inicial, porque eles já fizeram muito mais esforço em outros recursos, fornecendo efeitos colaterais mais estranhos, como flutuadores, porque foram mais solicitados pelos designers naquela época e, no entanto, não demoraram muito tempo para permitir isso, podemos usar as quatro propriedades para empurrar / puxar um elemento contra seus vizinhos (agora só temos quatro para empurrar e apenas dois para puxar).

Quando o html foi projetado, as revistas adoravam o texto refletido nas imagens naquela época, agora odiadas, porque hoje temos tendências de toque e adoramos coisas esqueléticas com muito espaço e nada para ler. É por isso que eles colocam mais pressão nos carros alegóricos do que na centralização, ou poderiam ter projetado algo como margin-top: fill;ou margin: average 0;simplesmente alinhar o conteúdo ao fundo ou distribuir seu espaço extra.

Nesse caso, acho que não foi implementado devido ao mesmo motivo que faz com que o CSS não tenha um :parentpseudo-seletor: Para evitar avaliações em loop.

Sem ser engenheiro, posso ver que o CSS agora é feito para pintar elementos uma vez, lembre-se de algumas propriedades para futuros elementos a serem pintados, mas NUNCA voltando aos elementos já pintados.

É por isso que (acho) o preenchimento é calculado na largura, porque esse é o valor que estava disponível no momento de começar a pintá-lo.

Se você tivesse um valor negativo para preenchimento, isso afetaria os limites externos, que JÁ foram definidos quando a margem já foi definida. Eu sei, nada foi pintado ainda, mas quando você lê como vai o processo de pintura, criado por gênios com a tecnologia dos anos 90, sinto que estou fazendo perguntas idiotas e apenas digo "obrigado" hehe.

Um dos requisitos das páginas da Web é que elas estejam disponíveis rapidamente, ao contrário de um aplicativo que pode levar tempo e consumir os recursos do computador para obter tudo correto antes de exibi-lo, as páginas da Web precisam usar poucos recursos (para que se ajustem a todos os dispositivos possível) e ser rolado com facilidade.

Se você vir aplicativos com refluxo e posicionamento complexos, como o InDesign, não poderá rolar tão rápido! É preciso um grande esforço dos processadores e da placa gráfica para ir para as próximas páginas!

Então, pintando e calculando para a frente e esquecendo um elemento que foi desenhado uma vez, por enquanto parece ser um DEVE.

A colocação de um Iframe em contêineres não corresponderá ao tamanho do contêiner. Adiciona cerca de 20 px de preenchimento. Atualmente, não há uma maneira fácil de corrigir isso. Você precisa de javascript ( http://css-tricks.com/snippets/jquery/fit-iframe-to-content/ )

Margens negativas seriam uma solução fácil.

Porque os designers de CSS não tiveram a previsão de imaginar a flexibilidade que isso traria. Existem várias razões para expandir a área de conteúdo de uma caixa sem afetar seu relacionamento com elementos vizinhos. Se você acha que isso não é possível, coloque algum nowraptexto longo em uma caixa, defina uma largura na caixa e observe como o conteúdo excedido não faz nada no layout.

Sim, isso ainda é relevante para o CSS3 em 2019; caso em questão: layouts flexbox. As margens dos itens do Flexbox não são recolhidas; portanto, para espaçá-las uniformemente e alinhá-las com a borda visual do contêiner, é necessário subtrair as margens dos itens do preenchimento do contêiner. Se qualquer resultado for <0, você deverá usar uma margem negativa no contêiner ou somar esse negativo com a margem existente. Ou seja, o conteúdo do elemento afeta como se define as margens para ele, o que é inverso. A soma não funciona corretamente quando o conteúdo dos elementos flexíveis possui margens definidas em unidades diferentes ou é afetado por um tamanho de fonte diferente etc.

O exemplo abaixo deve, idealmente, ter caixas cinza alinhadas e uniformemente espaçadas, mas, infelizmente, não são.

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>

Eu encontrei bastante desses pequenos problemas ao longo dos anos em que um pouco de preenchimento negativo teria percorrido um longo caminho, mas, em vez disso, sou forçado a adicionar calc()pré-processadores de marcação, uso ou CSS não-semânticos que funcionam apenas quando as unidades são as mesmas etc.