Por que o CSS não suporta preenchimento negativo?


124

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.


27
porque não faz sentido ter estofo negativo
Petah

1
É o mesmo que você veria em um HTML gerado pelo Frontpage. Isso meio que funciona, mas gera muitos erros ao ser validado. O preenchimento negativo não faz parte das especificações, mas ainda é suportado pelos navegadores.
Linus Kleen

9
Muitas pessoas gostariam de um exemplo. Aqui está o meu e por que eu adoraria o preenchimento negativo. Usando o recurso de imagem da borda, convém deixar a borda da imagem sobrepor levemente o texto (por exemplo, se você estiver criando um balão brilhante com muito brilho, muito popular na web nos dias de hoje;))
Himmators

81
Se algo "não faz sentido" para alguém, não é desculpa para eles atrapalharem os outros.
Rolf #

1
Estou tentando exibir o código em uma <span>tag e a maneira como ele é analisado gera quebras de linha extras no início do bloco de código. Com preenchimento negativo, eu poderia fazer esse espaço extra ir embora.
Steven Lu

Respostas:


86

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.


2
Obrigado amigo. Isso me dá uma razão satisfatória. Felicidades. :)
ikartik90

11
E se você quiser reduzir a borda mais perto do texto, por exemplo, quando estiver usando uma imagem de borda.
Himmators

5
às vezes não é prático editar o CSS de todos os filhos de um contêiner. Você pode ter CSS genérico que se aplica a esses elementos no documento e não deseja alterá-lo para o conteúdo de um contêiner específico, por exemplo.
Rolf #

15
É uma razão, mas eu não consideraria satisfatória. Este é um caso em que a especificação vai além de me dizer como definir minha página e começa a me dizer como devo definir minha página. Se eu quiser que meu conteúdo se sobreponha às bordas, bordas e / ou margens do plano de fundo, essa deve ser minha prerrogativa, não obstante a imaginação dos definidores das especificações de por que eu gostaria de fazê-lo. Desculpe, só um pouco irritado que eu tenha que adicionar imagens sintáticas ou pior, imagens em cores com um único pixel de largura para obter um separador de tamanho específico, menor que a altura do texto e centralizado verticalmente.
Jason

1
@zzzzBov, senti que era relevante devido ao exemplo que dei no final do motivo pelo qual gostaria de fazer uma coisa dessas, o que é uma pergunta comum nos comentários desta página. É certo que meu cavalo estava um pouco alto até aquele ponto.
Jason

4

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.


37
A borda recolhida no conteúdo é exatamente o efeito desejado. Você conhece alguma outra maneira de obter esse efeito?
Rolf

4
Concordou com Rolf. Você, Oded, obviamente não gosta de projetos experimentais complexos, posso ver. Usando preenchimento negativo e borda, embora não seja possível usar valores explícitos de pixels, é praticamente impossível obter resultados semelhantes. Até onde eu sei, você precisaria de vários elementos aninhados para conseguir a mesma coisa, no entanto, as coisas ficam um pouco mais complicadas, em alguns casos.
Yeti

4

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.


1
Sim, mas para esse propósito, prefiro ter novos atributos para elementos html, em vez de seqüestrar o comportamento de outros atributos. Seu exemplo pede um novo atributo interno-superior; como o atributo superior do elemento relativamente posicionado, mas relativo a si mesmo, não a pai. Outro bom uso do preenchimento negativo seria fazer um elemento proporcional ao preenchimento de largura com preenchimento de 100%, mas permitir que o elemento crescesse verticalmente se mais conteúdo o exceder, o que é impossível se o conteúdo estiver em um irmão extra-pos. O preenchimento negativo levaria o elemento recolhido pelo preenchimento de volta ao seu tamanho.
sergio

em 2018, a centralização é tão fácil quanto usar o display flex com justificar conteúdo e alinhar itens ... 3 linhas de código para obter uma div centralizada perfeita.
kaiser


1

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.



0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.