Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

LeonardoSNAT

HTML não preenche toda janela, mesmo com width:100%

Por , em Desenvolvimento frontend

Recommended Posts

LeonardoSNAT    0

LeonardoSNAT
Postado

Olá. Recentemente estive tendo uns problemas com o preenchimento da janela segue meu código base:

	<!DOCTYPE html>
<html>
<meta charset= "utf-8" />
<head>
   <title>blank</title>
   <link rel="icon" type="image/png" href="img/icon.png">
   <link rel="stylesheet" type="text/head" href="css/css.css"/> 
</head>
<body>
</body>
</html>

Código base simples como qualquer uma, porém durante sua reprodução em navegadores, acontece a formação de um borda branca ao redor do elemento: cidx.png

Para resolver tais exemplos eu faço certas mudanças no css, como:

div{
  width: 100.5%;
  margin-top: -0.5%;
  ;
}

Eu sei que isto não é a forma correta, pelo menos espero que não seja. Alguem saberia como resolver tal problema e evitar a utilização destes códigos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

cahe7cb    27

cahe7cb
Postado

Os navegadores costumam colocar uma margem padrão no body da página, então é só sobrepor esse padrão no seu CSS.

 

body {
	margin: 0;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

reidark    5

reidark
Postado

Nunca, absolutamente nunca dê reset em todos os elementos com a mesma propriedade.

O seletor * significa tudo ou todos, ou seja, todos os elementos do seu site vão vir "nativamente" com o que você inspecionar ali. No começo, talvez até seja sua solução, mas, para frente você vai ver o problema que isso te gera.

O * deve ser usado com cautela, pensando a longo prazo se realmente vai ser necessário e não quebrará nada no futuro do seu projeto.

Faça como o amigo ali em cima citou, use sempre a tag body ou até a própria html para resetar essas margens.

Compartilhar este post

Link para o post
Compartilhar em outros sites

LeonardoSNAT    0

LeonardoSNAT
Postado

Nunca, absolutamente nunca dê reset em todos os elementos com a mesma propriedade.

 

O seletor * significa tudo ou todos, ou seja, todos os elementos do seu site vão vir "nativamente" com o que você inspecionar ali. No começo, talvez até seja sua solução, mas, para frente você vai ver o problema que isso te gera.

 

O * deve ser usado com cautela, pensando a longo prazo se realmente vai ser necessário e não quebrará nada no futuro do seu projeto.

 

Faça como o amigo ali em cima citou, use sempre a tag body ou até a própria html para resetar essas margens.

 

 

Mas então quando eu poderia utilizar o *?

Compartilhar este post

Link para o post
Compartilhar em outros sites

reidark    5

reidark
Postado

Mas então quando eu poderia utilizar o *?

Para elementos BEM gerais e que você sabe, desde o começo, que na maioria das vezes vão ser assim, como por exemplo a cor de fonte principal do site ou até mesmo a própria fonte.

 

Isso ficaria bem geral, mas é claro que você mudaria de acordo com o caso.

 

Um exemplo:

 

 

*{
color: #fff;
}

h1{
color:#000;
}

/* Exemplo básico onde eu declaro que a cor geral das fontes do meu site são brancas, mas nos títulos (h1) a cor vai ser preta */

O * não deve ser usado para declarar valores de box como é o caso de paddings, borders, margins, floats, displays entre outros.

 

Mas, uma dica para você: Não estou falando que você não pode, porque poder você pode, só estou te alertando que isso pode (e vai) causar problemas pra você caso use (em questão dos box model).

 

Abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito