Como Definir Recuo

Índice:

Como Definir Recuo
Como Definir Recuo

Vídeo: Como Definir Recuo

Vídeo: Como Definir Recuo
Vídeo: Como fazer recuo no word 2024, Maio
Anonim

Na maioria das vezes, para especificar o tamanho dos recuos nas páginas HTML, são usados os recursos da linguagem CSS (folhas de estilo em cascata). Embora na própria linguagem HTML existam vários resquícios "rudimentares", permitindo em alguns casos definir recuos. Abaixo estão as opções que são usadas com mais frequência, mas, além delas, ainda existem muitos tipos diferentes de truques que permitem definir recuos para marcação não padrão de documentos HTML.

Como definir recuo
Como definir recuo

É necessário

Conhecimento básico de linguagens HTML e CSS

Instruções

Passo 1

Determine o elemento da página a partir do qual recuar. Por exemplo, se o texto for colocado dentro da tag … (bloco), então este bloco será o elemento pai para este texto e o recuo deve ser contado a partir das bordas do bloco. E se o texto (ou imagem) não estiver dentro de nenhum elemento de bloco (div, li, etc.) ou embutido (span, p, etc.), seu pai será o corpo do documento (tag body). A definição de um elemento pai para o texto é necessária porque é ele quem precisa definir as descrições dos estilos que formam os recuos. Vamos supor que seu texto seja colocado dentro de um bloco div: Texto de amostra

Passo 2

Use a propriedade de margem da linguagem CSS para definir as margens, ou seja, a distância das bordas de um elemento aos elementos adjacentes, bem como às bordas do elemento pai. Esta distância pode ser definida separadamente para o preenchimento de cada lado: margin-top - no topo, margin-right - à direita, margin-bottom - na parte inferior, margin-left - à esquerda. Para o exemplo acima, este código css pode ser parecido com este: div {

margem superior: 10px;

margem direita: 15px;

margin-bottom: 40px;

margem esquerda: 70px;

} Aqui, "div" é um seletor que especifica que este estilo deve ser aplicado a todos os divs no código do documento. A sintaxe CSS permite combinar todas as quatro linhas em uma: div {

margem: 10px 15px 40px 70px;

} Os valores dos recuos devem ser sempre especificados nesta ordem: primeiro - no topo, depois - à direita, inferior e esquerda. Se os recuos são iguais em todos os lados, é suficiente especificar o valor uma vez: div {

margem: 70px;

} Além disso, você pode definir uma margem horizontal flutuante (ou seja, esquerda e direita). Isso pode ser muito útil quando você precisa definir um bloco de determinada largura exatamente no centro da janela do navegador. O próprio navegador determina automaticamente quanto recuo deve haver em ambos os lados, se você escrever a seguinte instrução CSS: div {

margem: 0 automático;

}

etapa 3

Use a propriedade padding para definir o padding, que é a distância da borda de um elemento a quaisquer elementos colocados dentro dele, incluindo texto. A sintaxe para esta propriedade é exatamente a mesma que para a propriedade margin: div {

padding-top: 10px;

padding-right: 15px;

acolchoamento inferior: 40px;

padding-left: 70px;

} Ou div {

preenchimento: 10px 15px 40px 70px;

}

Passo 4

Use a propriedade text-indent para definir o recuo adicional para a primeira linha de cada parágrafo do texto. Por exemplo: div {

recuo de texto: 80px;

}

Etapa 5

Use os atributos hspace e vspace da tag HTML img para definir o recuo horizontal e vertical da imagem para os elementos externos, respectivamente. Por exemplo, assim:

Etapa 6

Use o atributo cellpadding da tag da tabela se precisar definir o recuo das bordas das células na tabela até seu conteúdo. E o atributo cellspacing define o espaçamento entre as células da tabela. Por exemplo:

1 2

Recomendado: