0

Preciso usar o padding para deixar um espaçamento entre a borda e o centro porem o que quando uso padding a div esta se movendo algum tem alguma ideia?

http://yugioh.site/layout.html

css

 html, body { height: 100vh; width: 100vw; margin: 0;background-image: url("http://img13.deviantart.net/ae68/i/2012/268/1/8/akiza_yugioh_wallpaper_by_iad1l-d5fv2aa.jpg");background-size: 100% 100%;min-height:500px;min-width:1000px;}
#logo {
height: 14vh;
width: 20vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left: 0.5vw;
background-image: url("img/fundo_logo.png");
background-size: 100% 100%;
}
#usuarioonline {

height: 84vh;
width: 20vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15vh;
left:0.5vw;
background-image: url("img/fundo_online.png");
background-size: 100% 100%;
}
#perfil {
height: 14vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left: 21vw;
background-image: url("img/fundo_usuario.png");
background-size: 100% 100%;
}
#desafio {

height: 39vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15vh;
left:21vw;
background-image: url("img/fundo_usuario.png");
background-size: 100% 100%;
}
#chat {

height: 39vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 55vh;
left:21vw;
background-image: url("img/fundo_chat.png");
background-size: 100% 100%;
}
#chatinput {

height: 5vh;
width: 27.5vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 94vh;
left:21vw;
background-image: url("img/fundo_chatinput.png");
background-size: 100% 100%;
}
#menu {

height: 14vh;
width: 50vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 0vh;
left:49vw;
background-image: url("img/fundo_menu.png");
background-size: 100% 100%;
}
#conteudo {

height: 83.5vh;
width: 50vw;
border: 2px solid #F00;
overflow: auto;
position: absolute;
top: 15.5vh;
left:49vw;
background-image: url("img/fundo_conteudo.png");
background-size: 100% 100%;
}

VEJAM O CODIGO FONTE usei o padding somente na primeira div logo e a mesma se deslocou para o lado.

Sei que posso colocar outra div dentro da mesma e adicionar os atributos que quero, porem afim de reduzir o codigo gostaria de saber se e possivel o que quero.

html

 <div id="logo">logo</div>
 <div id="usuarioonline">useronline</div>
 <div id="perfil">perfil</div>
 <div id="desafio">desafio</div>
 <div id="chat">chat</div>
 <div id="chatinput">chatinput</div>
 <div id="menu">menu</div>
 <div id="conteudo">conteudo</div>
0

1 Resposta 1

2

Pesquisando achei esse post http://sergiolopes.org/css-box-sizing-border-box/

onde tirou um bocado das minhas duvidas o box-sizing limita a div a ela mesmo portanto o padding passa a agir dentro da propria div como era pra ser naturalmente :)

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

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 .