Formatação

[johnhey 0]

Boa noite pessoal, tenho uma div que mostra o nome do usuário, está tudo a funcionar a 100% o login, mas infelizmente não consigo colocar uma margem e nem um padding.

 

<div id="logins">

<?php

echo "Bem-Vindo! ". ucfirst($_SESSION['sessao_user']);

?>

</div>

 

Já coloquei

 

#logins{

margin-top: 10px;

margin-rigth:50px;

width: 1024px;

height: 360px;

text-align: right;

}

 

#logins{

margin-top: 10px;

padding-rigth:50px;

width: 1024px;

height: 360px;

text-align: right;

}

 

Mas fica alinhado à margem do lado direito, mesmo colocando a margem ou padding a direita a 50, 100, 150 ou 200, não funciona.

O que estou a fazer de errado?

[rikaschmitt 54]

Tá escrito "rigth", o correto é "right"

[johnhey 0]

rikaschmitt ao digitar aqui no forum por um lapso digital mal, mas no arquivo css esta correcto e não funciona.

[L. Henrique 179]

Johnhey, entendi a confusão que está causando, e na verdade, isso é bem normal de acontecer.

Lembre-se: Um padding acrescenta um valor para largura/altura quando inserido. Então podemos concluir que, se você tem um elemento alinhado a direita (através do text-align) ele vai pegar a largura desse container (1024px) e vai somar com o padding que adicionou (Ex.: 100px), ou seja, no total seu container terá 1124px de largura.

Já que a sua div tem uma largura fixa, você pode subtrair o valor de padding-right ao width da sua div. Vou deixar um exemplo com três conceitos do que você possivelmente está fazendo e o que pode fazer pra solucionar.

Confira o exemplo aqui: JSFiddle.

Caso não consiga conferir o exemplo, deixarei o código aqui abaixo do que foi feito para que possa fazer alguns testes.
HTML:

<div class="wrapper">
  <p>Sem padding e alinhado a direita.</p>
  <div id="logins_um">
     <!-- Exemplo -->
     Bem Vindo! - Unknown
  </div>
</div>

<div class="wrapper">
  <p>Com padding e alinhado a direita.</p>
  <div id="logins_dois">
     <!-- Exemplo -->
     Bem Vindo! - Unknown
  </div>  
</div>

<div class="wrapper">
  <p>Com padding e subtração da largura.</p>
  <div id="logins_tres">
     <!-- Exemplo -->
     Bem Vindo! - Unknown
  </div>
</div>

CSS:

#logins_um {
  background: #000;
  color: #FFF;
  width: 250px; /* Alterado para melhor visualização no JSFiddle */
  height: auto;
  text-align: right;
}

#logins_dois {
  background: #000;
  color: #FFF;
  width: 250px; /* Alterado para melhor visualização no JSFiddle */
  height: auto;
  text-align: right;
  padding-right: 20px;
}

#logins_tres {
  background: #000;
  color: #FFF;
  width: 230px; /* De 250px, reduzi para 230px, já que o padding ocupa 20px. */
  height: auto;
  text-align: right;
  padding-right: 20px;
}

/* DESCONSIDERAR ESSA PARTE */
body {
  padding: 0;
  margin: 0;
}

.wrapper {
  width: 100%;
  padding: 20px;
  color: #FFF;
}
  .wrapper:nth-child(1) {
    background: #03A9F4;
  }
  .wrapper:nth-child(2) {
    background: #FFC107;
  }
  .wrapper:nth-child(3) {
    background: #E91E63;
  }

[johnhey 0]

Obrigado deu certo.