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>