0

Criei uma <div> mas ela não esta ocupando 100% da parte superior que eu quero veja: https://i.sstatic.net/dAgKv.png ela esta com um espaçamento por volta :(

este é o código que usei:

css:
.top-bar {
    position: relative;
    width: 100%;
    height: 60px;
    background: #313D4C;
}

2 Respostas 2

1

Tente adicionar um margin: 0 a essa div, e um margin: 0; padding: 0; ao body. Ficaria assim:

 body{
     margin: 0;
     padding: 0;
 }
 .top-bar {
     position: relative;
     width: 100%;
     height: 60px;
     background: #313D4C;
     margin: 0;
 }

Contudo, o ideal seria uma aplicação desses estilos a todos os elementos, você conseguiria isso por meio do seletor * do css, fica assim:

*{
     margin: 0;
     padding: 0;
 }

Além disso você poderia colocar um border-box: box-sizing, muito bem explicado nesse artigo. Ele faria com que as determinções de tamanhos dos elementos, já levassem em consideração por si só margens, espaçamentos, bordas, entre outras coisas.

2
  • 1
    Obrigado cara, resolveu aqui. Mas se eu usar o * nao vai acabar bugando outros elementos ?
    – user37798
    Commented 2/01/2016 às 22:46
  • Isso vai depender do seu código, teste e veja. Normalmente não, já que ele irá levar em consideração os styles paticulares a cada elemento. Então se você determinou margens, estas continuaram lá. Commented 2/01/2016 às 23:08
0

Ta usando algum reset? * { margin: 0; padding: 0; }

Pode ser a falta de algum reset, pois os browsers tem um margin default de 8px.

Ou tenta por como block:

.topbar { display: block; width: 100%; height: 60px; }

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