4

Utilizar uma margin com valor negativo é uma prática ruim (bad practice)?

Exemplo:

margin-top: -3px;
5
  • 1
    Prática ruim baseado em quê?
    – Jéf Bueno
    Commented 9/03/2017 às 18:54
  • @jbueno acredito que existem possibilidades de posicionar um elemento sem utilizar o valor negativo, pórem não sei se utilizar desse método é uma prática ruim. Commented 9/03/2017 às 18:58
  • 1
    Acho que o @jbueno está querendo dizer que essa coisa de "boa prática" / "má prática" é pra ser relativizada. Seguir cegamente uma "boa prática" não garante bom código, assim como nunca usar nenhuma "má prática" também não garante nada.
    – bfavaretto
    Commented 9/03/2017 às 19:35
  • @vnbrs a pergunta não tem haver com estilo-de-codificação, o problema é o efeito causado pelo valor negativo e só, estilo-de-codificação se refere ao "entendimento do código" e não a execução dele.
    – Syzoth
    Commented 2/10/2017 às 18:02
  • Arthur, nenhuma das respostas falou com detalhe sobre o box-model, não tenho mais como responder, mas pra dizer, não existe isso de pratica ruim com valores negativos no CSS, um box-model pode variar e assim o efeito da margem ou espaçamento também pode variar, existem inumeros motivos para usar valores negativos, portanto não é uma pratica ruim, você usa quando necessário, se não é necessário não use. (não dá pra dar mais detalhes devido a limitação do tamanho dos comentários)
    – Syzoth
    Commented 2/10/2017 às 18:11

2 Respostas 2

3

Não, margem negativa em CSS não é uma má prática. Margem negativa é um ótimo caminho para se negar paddings em um elemento, quando algum elemento interno deve ser posicionado de tal maneira.

Também, acho que a única maneira 100% confiável, suportada por todos os browsers, de se centralizar um elemento vertical e horizontalmente em relação a um elemento pai, é se utilizando de margem negativa, como segue o exemplo:

.classe_css{
  left:50%;
  top:50%;
  position: relative;
  margin-left:-40px; /* -1/2 width */
  margin-top:-40px; /* -1/2 height */
}
4
  • Gostei em partes da sua resposta... Não ficou claro esse exemplo, poderia explicar melhor? Commented 10/03/2017 às 14:27
  • Claro, eu tinha usado esse código como exemplo para responder essa pergunta. Usar margem negativa é a melhor, talvez única solução compatível com todos os browsers nesse caso, e se quiser dar uma olhada ,disponibilizei nesse fiddle um exemplo funcional. Commented 10/03/2017 às 14:30
  • Entendi... acho importante vc atualizar a resposta informando que se aplica a esse cenário. Vlw Commented 10/03/2017 às 14:43
  • Na real, tem uma outra forma que acho melhor ainda porque pode se aplicar mesmo que você não conheça os tamanhos das divs. Odeio margens negativas (opinião própria). Substitua as margens negativas por essa linha: transform: translate(-50%, -50%); Commented 10/03/2017 às 15:19
0

Margin negativa não é necessariamente uma pratica ruim, por exemplo você consegue utilizar a técnica de faux-columns sem imagens.

Negative values for margin properties are allowed, but there may be implementation-specific limits.

— W3C, sobre margin properties

Esse trecho foi retirado de uma discussão no iMasters sobre o mesmo assunto.

Dá uma lida neste artigo aqui, ele explica formas de utilizar margens negativas, mostrando formas comuns e erros também.

2
  • Concordo que não seja uma prática ruim. Eu só não colocaria referências tão antigas se tratando de CSS.
    – Joao Paulo
    Commented 9/03/2017 às 19:08
  • 1
    sim sim é só como exemplo existe muitos artigos muito bons para referenciar atualizei os links e coloquei um mais recente Commented 9/03/2017 às 19:10

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .