Mais
×

Como por espaçamento entre DIVs

Atualizado em 20 julho, 2017

As DIVs são elementos HTML criados pela tag "

" 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.

Instruções

As DIVs são bastante úteis no layout de um site (Comstock/Stockbyte/Getty Images)
  1. Abra a sua página web no Bloco de Notas ou outro editor de código. Localize as suas DIVs:

    Conteúdo da div esquerda

    Conteúdo da div direita

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

  2. Localize as tags "

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

    left {

    }

    right {

    }

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

    left {

    float: left; }

    right {

    float: right; }

  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.

Aviso

  • 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.
bibliography-icon icon for annotation tool Cite this Article