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 "

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

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

Step 2

Localize as tags "

Step 3

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

left {

}

right {

}

Step 4

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

left {

float: left; }

right {

float: right; }

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

eHow Brasil
×