CSS: Como usar Margin e Padding no Blog

Konnichiwaa fadinhas e elfos! Como vocês estão? Recentemente recebi um e-mail onde reparei que a propriedade css de margin e padding ajudam e facilitam demais em alguns momentos. Pensando nisso, acho super necessário compartilhar isso com vocês também! Não sabe o que é? Como funciona? Ou como usar no seu blog? Então esse post é para você! Let's go?

Aviso rápido 1 : Sempre, seeempre faça backup do seu template! Não importa que modificação faça! Não sabemos como certos layouts personalizados funcionam, então sempre faça seu backup! Aviso rápido 2: Este tutorial é com base na minha experiencia, existe um lado mais técnico mas tentei explicar da minha maneira.

CSS: Margin

O margin é feito para você conseguir posicionar algo em especifico. Sei que a palavra parece ''margem'' mas não é a margem do elemento e sim do fundo em geral onde ele está localizado. Vai aqui uma imagem rápida:

O retângulo azul, era algo que eu estava posicionando, e a margem é um css que eu adicionei por meio de visualização direta do F12. Bem, pode reparar que ta o número 20, certo? Isso porque adicionei margin-left: 20 px; , o elemento que eu estava mexendo foi um pouco para o lado direito (pois adicionou espaço no lado esquerdo). Agora se adicionasse margin-right ele iria para o lado esquerdo (já que adicionou espaço no lado direito). Conheça os comandos margin:

margin: auto; (centraliza)

Utilizo demais o margin: auto; já que na maioria das vezes quero ele centralizado da forma tradicional, mas também poda adicionar PX, adicionando px, ele aplica o numero para todos os lados (geralmente, não recomendo pois desce e fica pra esquerda, e espaço encima, meio que não sabe onde fica kk)

margin-left (vai para a esquerda)

Sabemos que left em inglês é esquerda. Grande parte de qualquer css e até mesmo html, é feito com elementos nomeados em inglês. Então assim, ele vai para a esquerda, e novamente, você pode tanto adicionar : margin-left: px; ou margin-left: auto; . Com px, você coloca a numeração e ele vai indo para esquerda aos poucos (isso no modo negativo, já positivo vai para a direita). E auto vai todo para a esquerda.

margin-right (vai para a direita)

Right como o nome mesmo diz é direita, adicionando esse, você consegue controlar algo que queira que fique para o lado direito. Funciona da mesma forma dos outros, margin-right: auto; vai todinho para a direita, e adicionando o px você modifica o posicionamento da direita aos poucos de acordo com o numero de px que colocar.

margin-top (para subir)

Margin top, é feito para adicionar espaço acima do elemento, ao colocar um px ele desce, agora muita gente utiliza esse da forma negativa, como por exemplo... invés de usar 20px usam -20px, a forma negativa faz com que ele suba. Pode usar em sidebar, posts e etc, caso queira que eles subam um pouco.

margin-bottom (para descer)

Esse não vejo ser muito usado, mas é bom para rodapé ou final do post, esse adiciona um espaço abaixo. Não recomendo o auto, e sim o manual com px.

June, eu to entendendo mas não to entendendo, onde eu aplicaria isso por exemplo?
Na area de skin do blog, antes de fechar as aspas:

.seletor {
background: #000;
margin-right: auto;
}

Pode modificar qualquer coisa! Uma logo do header. Uma imagem, Uma caixa ou até mesmo, o Leia mais que fiz o tutorial aqui no blog, o posicionamento dele funciona dessa maneira também.

Aproveite e leia também:

COMO PERSONALIZAR BOTÃO ''LEIA MAIS'' DO BLOGGER: VERSÃO CSS
CAIXA DE PESQUISA / SEARCH BOX KAWAII

CSS: Padding

 Agora, chega de confundir padding com margin, são coisas totalmente diferentes, padding faz lembrar espaçamento mas é o tipo de espaçamento DENTRO, do item. Segue abaixo uma aplicação em ''caixa'' (um exemplo fofinho para descontrair um pouco kk), vamos lá:

E a lógica funciona da mesma maneira, agora vou ser mais rápida já que você leu a parte do margin também né? (hum, to de olho):

padding-top  (estica ou aumenta para cima)

padding-bottom (aumentar para baixo)

padding left (aumentar para a esquerda)

padding-right (aumentar para a direita)

Para fixar na cabeça: Use padding para aumentar algo em especifico e use margin para posiciona-lo adequadamente a uma área!

Por hoje é só, espero que tenham gostado do post! A vida aqui está uma correria, assim que der tudo certo, estarei falando para vocês! Até mais e Kissus! Tem postagem toda semana então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *