3

Quando se quer eliminar as margens-padrão da página sempre vejo o seguinte código CSS:

html, body{
   margin: 0;
   padding: 0;
}

Por que usar html, body se usando apenas body que é o corpo da página já resolve?

Exemplo:

body{
   margin: 0;
   padding: 0;
}
<div>
  Nenhuma margem ou espaçamento
</div>

Existe alguma razão técnica para incluir o html no código?

1
  • Talvez nos navegadores mais antigos, havia essa necessidade de identificar toda a hierarquia do html, eu sempre declaro somente body e nunca tive problema. Acho que isso é a mesma coisa de ver alguns textos escritos por pessoas mais antigas usando "eh" ao invés de "é".
    – Edjane
    Commented 9/02/2018 às 1:37

3 Respostas 3

7

A razão para isso, é devido os navegadores utilizarem diferentes folhas de estilos padrão.

Exemplo, o Chrome pode utilizar um padrão de margins para o documento HTML:

/* É apenas um exemplo */
html {
    margin: 10px;
    padding: 10px;
}

O Firefox:

/* É apenas um exemplo */
html {
    margin: 20px;
    padding: 20px;
}

E o IE:

/* É apenas um exemplo */
html {
    margin: 0px;
    padding: 0px;
}

Se você não redefinir o estilo padrão, provavelmente terá algum problema. Por isso é recomendado redefinir todo o estilo padrão.

Claro que hoje em dia creio (não digo impossível) haja algum navegador que utilize margin ou padding padrão no documento HTML.

1
  • 2
    @dvd mas existem diversos navegadores disponíveis, não só os "mais conhecidos" e cada um pode utilizar um default. Na dúvida, sempre bom previnir :P
    – bonifacio
    Commented 9/02/2018 às 8:47
3

Como dito pelos colegas cada Browser tem sua folha de estilo padrão (usre-agent css). Aqui vc pode ler sobre isso O que é User Agent StyleSheets?

Outro ponto que vc pode verificar isso é no quesito crossbrowser, onde cada motor de renderização tem suas particularidades e é preciso usar o "Vendor Prefix" para as classes funcionarem em cada browser diferente, vc pode ler sobre isso aqui É necessário adicionar prefixos em algumas propriedades do CSS?

Inclusive é devido a essa diferença de CSS dos user-agentes que que exitem "metodologias" como u CSS.Normalize (tenta deixar todos os Browsers com o mesmo aspecto visual) e o CSS Reset (remove valores default de todos as classe), vc pode ler sobre isso aqui: CSS Reset ou Normalize?

Projeto CSS.Normalize: http://nicolasgallagher.com/about-normalize-css/ (palavras do criador)

OBS: Repare que essa opção usa volares diferentes para HTML e Body

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
body {
  margin: 0;
}

CSS Reset: https://cssreset.com/scripts/eric-meyer-reset-css/ (existem vários outros)

OBS: Repare que esse cara "zera" valores para quase tudo rss

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

E aqui tem uma lista dos valores Default do CSS sugeridos pela W3C: https://www.w3.org/TR/CSS2/sample.html

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { 
    display: block; unicode-bidi: embed 
}

Aqui tem uma lista dos valores default do CSS para a maioria dos elementos https://www.w3schools.com/cssref/css_default_values.asp


Apenas uma imagem de referência sobre a tag <h1> No Chrome e no FF Quantum. Repare que mesmo sem colocar um CSS o próprio Browser tem sua folha de estilo default. E isso pode variar de Browser para Browser conforme dito acima...

inserir a descrição da imagem aqui

2

Percebi que o uso de ambos elementos html, body na declaração do CSS só é necessário ao usar alguns estilos. No caso do margin, o html se torna desnecessário porque apenas o elemento body possui a margem padrão.

Geralmente usa-se html, body para outros estilos quando o estilo que se quer aplicar ao body depende também do estilo do html.

Um exemplo clássico é o estilo height. Por padrão, tanto o html quanto o body não possuem altura pré-definida. A altura de ambos dependerá do conteúdo da página, ou seja, a altura de ambos será até o final do último elemento da página.

Logo, se eu definir height apenas no body, não terá efeito porque a altura do html não foi definida. A altura do elemento-filho se baseia na altura do elemento-pai. Se o html, que é pai do body, não possui altura, logo o body fica sem referência.

Portanto, setando a altura em ambos:

html, body{
   height: 100%;
}

O body terá a altura do html, que será a mesma do viewport (área vísivel da janela).

Resumindo, se quiser apenas retirar as margens da página, use apenas body.

1
  • Uma alternativa para setar a altura sem precisar mexer no estilo da tag html, apenas na body é usar height: 100vh;
    – Costamilam
    Commented 5/02/2019 às 2:27

Você deve fazer log-in para responder a esta pergunta.

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