Editando espaços do box Imprimir

Modificado em: Ter, 11 Ago, 2020 na (o) 3:39 PM



O objetivo aqui é entender o espaçamento de cada parte da sua loja virtual. Vamos dizer que para facilitar o entendimento, separamos ela por BOX e elementos. Dentro de um box podem existir de 1 a 4 elementos.

Pois vejamos: você está montando um box com 4 produtos e quer que ele fique mais afastado do conteúdo de cima, porém quer que fique mais pertinho do conteúdo de baixo. Está criando um texto e quer que o mesmo fique mais afastado das laterais e que tenha um certo espaço entre si. Sim, tudo é possível. Depois que você dominar os espaços poderá brincar e deixar seu site do seu jeito.

Você sabe o que é um box, certo? Do contrario, leia este artigo antes de seguir e tudo ficará mais fácil: O que é um box?

Vamos com calma, é tudo bem detalhado mas fácil de entender. A janela de edição do box com todas suas opções é essa:mitienda-box-espaciosVamos ver cada um dos pontos dessa caixa de edição.MARGEM SUPERIOR DO BOX mitienda-espacios-partes1
  • Quanto espaço você vai querer dar entre este box e o box de cima? Este número determina se o seu box ficará mais ou menos afastado do conteúdo de cima. Prove e veja a diferença.
MARGEM INFERIOR DO BOX mitienda-espacios-partes2
  • É a mesma coisa que o de cima, porém pensando para a parte de baixo. Este número determina se o seu box ficará mais ou menos afastado do conteúdo de baixo.
MARGEM SUPERIOR INTERNA mitienda-espacios-partes3
  • Essa é a margem superior entre os elementos dentro do box e o próprio box. Por exemplo, você vai usá-la quando quiser aplicar um fundo no seu box.
MARGEM INFERIOR INTERNA mitienda-espacios-partes4
  • Essa é a margem inferior entre os elementos dentro do box e o próprio box. Igual ao de cima, porém pensando na parte de baixo do box.
Fica a dica: Olhe bem para estes 4 primeiros desenhos que acabamos de ver. Vê a diferença? Nos dois primeiros as flechas estão para fora do quadrado cinza e nos dois de baixo estão para dentro. Ou seja, os dois primeiros falam sobre o espaço externo do box e os próximos dois falam sobre os espaços internos ;)

MARGEM HORIZONTAL INTERNA DO BOX mitienda-espacios-partes5
  • Esta margem é muito parecida com as duas últimas que vimos, é o espaço que você terá entre os elementos do seu box e a margem do box.
MARGEM HORIZONTAL ENTRE ELEMENTOS mitienda-espacios-partes6
  • Essa margem é o espaço entre cada elemento dentro do box. Por exemplo, você adicionou 4 elementos produtos e quer separar um pouco eles, então dê mais margem entre elementos. Agora, se você adicionou 4 imagens e quer elas coladas umas nas outras, deixe em 4 e você terá este efeito.
Lembre-se que você poderá arrastar a bola na barra ou colocar um número, em todas as margens:mitienda-espacios-partes8

Fica a dica: tente usar as margens sempre com os mesmos números, de forma que tudo na sua página tenha simetria. Colocou 40 em um? Coloque no outro também.


Isso foi útil para você? Sim Não

Enviar feedback
Desculpe-nos por não podermos ajudar. Ajude-nos a melhorar este artigo com seu feedback.