Como por espaçamento entre DIVs

Escrito por sara williams | Traduzido por alexandre lima
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como por espaçamento entre DIVs
As DIVs são bastante úteis no layout de um site (Comstock/Stockbyte/Getty Images)

As DIVs são elementos HTML criados pela tag "<div>" que criam seções de conteúdo separadas dentro da página web. Layouts de páginas complicadas requerem o uso de muitas delas, incluindo algumas que estão dentro de outras. Os desenvolvedores Web chamam as DIVs que envolvem outras DIVs de contêineres e muitos layouts usam um contêiner em torno de toda a página para um melhor controle. Você pode por espaçamento entre esses elementos utilizando código CSS (Folhas de Estilo em Cascata). Defina a flutuação e as margens para alinhar as DIVs e distanciá-las uma das outras.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

Instruções

  1. 1

    Abra a sua página web no Bloco de Notas ou outro editor de código. Localize as suas DIVs:

    <div id=”left”> Conteúdo da div esquerda </div> <div id=”right”> Conteúdo da div direita </div>

    Encontre o ID de cada elemento que você deseja espaçar e atribua um para cada um que não possua ainda.

  2. 2

    Localize as tags "<style>" entre as definições das tags "<head>" da sua página ou adicione-as se não encontrar nenhuma:

    <style type=”text/css”> </style>

  3. 3

    Escreve as regras entre as tags. Selecione cada DIV utilizando o seu nome prefixado com o símbolo "#":

    left {

    }

    right {

    }

  4. 4

    Alinhe-as lado a lado usando a propriedade "float" se necessário:

    left {

    float: left; }

    right {

    float: right; }

  5. 5

    Defina a propriedade "margin" em cada regra de estilo para modificar as margens dos elementos. Você pode usar essa propriedade para definir todas as margens ou definir cada uma separadamente:

    left {

    margin-left: 20px; }

    right {

    margin: 20px; }

    No exemplo acima, a DIV "left" foi definida com uma margem de 20 pixels do lado esquerdo apenas, enquanto a outra foi configurada sua margem em 20 pixels para todos os lados.

Dicas & Advertências

  • Evite usar o mesmo ID em vários elementos HTML. Escolha um nome único e fácil de lembrar.
  • Faça uma cópia de segurança de sua página antes de editar o código.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível