Altere o preenchimento e o espaçamento superior em CSS. CSS de preenchimento superior: margens de preenchimento de posicionamento de conteúdo Div

Margens e preenchimento são estilos muito importantes na construção de uma página HTML. Eles permitem posicionar elementos com mais precisão, criar uma moldura com as lacunas necessárias, etc. Ambos os estilos são muito semelhantes e desempenham funções semelhantes. Mas ainda existem diferenças.

Os elementos podem ser aninhados ou localizados próximos uns dos outros. Vejamos o seguinte exemplo:

Temos duas mesas, limão e azul, localizadas uma abaixo da outra. As tabelas consistem em uma célula. Há um bloco vermelho na primeira célula da tabela. Usando este exemplo, vamos ver como funcionam as margens e os recuos.

Os campos são definidos por estilo preenchimento. Este estilo se aplica apenas a elementos contêineres, que podem conter outros elementos. O estilo permite definir a margem entre as bordas de um elemento e seu conteúdo. Estilo margem permite definir recuos de um elemento até as bordas mais próximas de outro elemento. As bordas de outro elemento podem ser as bordas do contêiner pai, bem como as bordas da própria página.

Existem várias maneiras de definir esses estilos. Por exemplo, especifique diretamente o tamanho de todas as margens ou recuos com um argumento em alguma unidade de medida (px, ex, em, pt, cm e assim por diante):

margem: 3px;

preenchimento: 3px 5px;

o primeiro determinará a quantidade de margens/recuos na parte superior e inferior, o segundo - à esquerda e à direita. Quando dados três argumentos:

margem: 3px 5px 2px; a primeira é a margem/recuo na parte superior, a segunda é à esquerda e à direita, a terceira está na parte inferior. Com quatro argumentos:, preenchimento: 3px 5px 2px 6px;, margem: 3px 5px 2px 6px;, a primeira é a margem/espaço em cima, a segunda está à direita, a terceira está em baixo, a quarta está à esquerda. É fácil lembrar: o primeiro é de cima para baixo e depois no sentido horário. Além disso, você pode definir margens e preenchimento para uma borda específica separadamente, usando os estilos apropriados:, topo acolchoado, preenchimento à direita, fundo de preenchimento, preenchimento à esquerda margem superior

Na figura, o bloco vermelho está dentro da célula da tabela e adjacente às suas bordas, ou seja, a célula não possui margens. Vamos definir as margens das células usando o estilo:

Como resultado, a página mudará para o seguinte:

Vejamos agora os recuos. Duas tabelas são adjacentes uma à outra, se quisermos afastá-las um pouco podemos aplicar recuos. Existem duas opções aqui: definir o recuo inferior da primeira tabela ou o recuo superior da segunda tabela. Vamos usar o segundo:

Observe que definimos o recuo especificamente para a tabela, e não para a célula da tabela, como é o caso dos campos. Aqui está o resultado:

A propósito, no primeiro caso (a lacuna entre o bloco vermelho e os limites da célula pai), o mesmo efeito poderia ser alcançado definindo os recuos do bloco. Em geral, se algo não estiver claro, avise-nos nos comentários.

Código HTML da página de teste:

Bem-vindo ao meu blog. CSS (Cascading Style Sheets) oferece muitas opções de personalização aparência páginas da web. Hoje gostaria de mostrar brevemente como definir em CSS o preenchimento na parte superior ou em qualquer outro lado para qualquer elemento.

Margem

A margem é definida usando a propriedade margin. Com sua ajuda, você pode definir margens em todos os quatro lados ao mesmo tempo, ou usar outras propriedades: margem superior, margem esquerda, margem direita, margem inferior, que permitem fazer isso apenas em um lado.

A margem determina a distância que a borda selecionada de um elemento será deslocada de outros elementos na página. Por exemplo, a entrada:

P,div(
Margem superior: 20px;
}

Isso significa que todos os blocos e parágrafos serão recuados na parte superior em 20 pixels, ou seja, sua borda superior será afastada dos elementos adjacentes a ela nesta distância.

As margens podem ser escritas em cada lado usando apenas uma propriedade de margem, na qual são gravados 4 valores seguidos:

Divisão(
Margem: 20px 10px 20px 10px;
}

O preenchimento será dado nas bordas superior, direita, inferior e esquerda, respectivamente. Como neste caso eles são iguais em lados opostos, também poderíamos escrever assim:

Divisão(
Margem: 20px 10px;
}

O primeiro valor é a margem superior e inferior e o segundo é a margem lateral.

Recuo

O preenchimento interno funciona de maneira diferente - ele não afasta o bloco de outros elementos, mas adiciona esse espaço dentro do elemento, afastando o conteúdo do bloco de suas bordas. É conveniente. Onde você viu um site onde o texto começa no canto superior esquerdo da janela?

Eu não vi isso porque os desenvolvedores web sempre usam recuos externos e internos para tornar o texto o mais fácil de ler possível. O preenchimento interno é especificado usando a propriedade padding, na qual 4 valores podem ser listados de uma vez, separados por um espaço, para todas as arestas, respectivamente.

Além disso, da mesma forma que a margem, você pode adicionar o nome do lado e definir a distância apenas para ele. Por exemplo, o preenchimento superior pode ser escrito usando padding-top . Em geral, a propriedade padding funciona exatamente da mesma forma que a propriedade margin.

Por exemplo, você pode fornecer este trecho de código:

Bloquear(
Largura: 200px;
Preenchimento: 20px;
}

Qual você acha que será a largura real do nosso elemento? Aqui você pode ver que são 200 pixels, mas os preenchimentos adicionam outros 20 de cada lado, totalizando 240 pixels. Leve isso em consideração ao projetar.

Gostaria também de observar que o preenchimento normalmente é fornecido apenas para elementos de bloco; é melhor não fornecê-lo para elementos embutidos; A margem funciona bem com qualquer elemento.

Olá, queridos leitores do blog! Hoje continuaremos aprendendo sobre Cascading Style Sheets ou CSS. Em artigos anteriores, já consideramos em termos gerais o layout de blocos do site. Como resultado, começamos a ter páginas da web bastante profissionais, mas faltava alguma coisa. Mas provavelmente não possuem recuos e molduras. Hoje veremos as regras de estilo de margem, preenchimento e borda, que permitem definir recuos e molduras para elementos HTML.

Opções de preenchimento CSS

Com a ajuda de folhas de estilo em cascata, é possível definir dois tipos de recuo.

1.Recuoé a distância da borda imaginária do elemento ao seu conteúdo. O valor da distância é especificado usando o parâmetro preenchimento. Este recuo pertence ao próprio elemento e está localizado dentro dele.

2. Margem— a distância entre a borda do elemento atual da página web e as bordas dos elementos vizinhos ou do elemento pai. O tamanho da distância é controlado pela propriedade margem. Este recuo está localizado fora do elemento.

Para maior clareza, imagine:

Por exemplo, considere uma célula preenchida com texto. Então o preenchimento é a distância entre a borda imaginária da célula e o texto que ela contém. E a margem externa é a distância entre as bordas das células adjacentes. Vamos começar com preenchimento.

Preenchimento em CSS usando preenchimento (superior, inferior, esquerda, direita)

As propriedades de estilo padding-left, padding-top, padding-right e padding-bottom permitem definir os valores de preenchimento, respectivamente, à esquerda, superior, direita e inferior de um elemento da página da web:

tampo acolchoado | preenchimento à direita | fundo acolchoado | preenchimento à esquerda: valor | juros | herdar

A quantidade de recuo pode ser especificada em pixels (px), porcentagem (%) ou outras unidades aceitáveis ​​para CSS. Ao especificar porcentagens, o valor é calculado a partir da largura do elemento. O valor herdado indica que é herdado do pai.

Por exemplo, para o parágrafo atual, apliquei uma regra de estilo que define o preenchimento esquerdo para 20 pixels, o preenchimento superior para 5 pixels, o preenchimento direito para 35 pixels e o preenchimento inferior para 10 pixels. A entrada da regra ficará assim:

p.teste(
preenchimento à esquerda: 20px;
preenchimento superior: 5px;
preenchimento à direita: 35px;
preenchimento inferior: 10px
}

Regra de preenchimento composto permite especificar recuos em todos os lados de um elemento de página da web de uma só vez:

preenchimento:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Uma regra pré-fabricada permite o uso de um, dois, três ou quatro valores, separados por um espaço. Neste caso, o efeito depende do número de valores:

• se você especificar um valor, definirá a quantidade de recuo em todos os lados do elemento da página;
• se você especificar dois valores, o primeiro definirá a quantidade de recuo na parte superior e inferior, e o segundo - à esquerda e à direita;
• se você especificar três valores, o primeiro determinará a quantidade de recuo na parte superior, o segundo - à esquerda e à direita e o terceiro - na parte inferior;
• se quatro valores forem especificados, o primeiro definirá a quantidade de recuo na parte superior, o segundo na direita, o terceiro na parte inferior e o quarto na esquerda.

Assim, a regra CSS acima pode ser encurtada tanto quanto possível e escrita da seguinte forma:

p.teste (preenchimento: 5px 35px 10px 20px)

A propriedade margin ou margens em CSS

Os atributos de estilo margin-left, margin-top, margin-right e margin-bottom permitem definir os valores das margens, respectivamente, esquerda, superior, direita e inferior:

margem superior | margem direita | margem inferior | margem esquerda:<значение>|auto|herdar

Conforme mencionado acima, a margem é a distância da borda do elemento atual até a borda do elemento adjacente ou, se não houver elementos vizinhos, até a borda interna do contêiner pai.

A quantidade de recuo pode ser especificada em pixels (px), porcentagem (%) ou outras unidades permitidas para CSS:

p(
margem esquerda: 20px;
}
h1(
margem direita: 15%;
}

O valor auto significa que o tamanho do recuo será calculado automaticamente pelo navegador. Se você usar a notação percentual, os recuos serão calculados dependendo largura do contêiner pai. Além disso, isso se aplica não apenas à margem esquerda e à margem direita, mas também à margem superior e à margem inferior. As margens percentuais serão calculadas dependendo da largura, e não da altura, do contêiner.

É permitido usar como valores de recuos externos valores negativos:

p(
margem esquerda: -20px;
}

Se com valores de recuo positivos elementos adjacentes são afastados, então, com um valor negativo, o bloco vizinho colidirá com o elemento para o qual definimos esse deslocamento negativo.

Também podemos especificar o preenchimento usando o atributo style margem. Ele define os valores de recuo simultaneamente em todos os lados de um elemento da página web:

margem:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Ao especificar um, dois, três ou quatro valores de preenchimento, esta propriedade obedece às mesmas leis da regra de preenchimento.

Opções de borda usando a propriedade Border

Ao definir quadros, existem três tipos de parâmetros:

• largura da borda — espessura da borda;
• cor da borda — cor da borda;
• estilo de borda — o tipo de linha com a qual o quadro será desenhado.

Vamos começar com o parâmetro de espessura do quadro:

largura da borda: [valor | fino | médio | grosso] (1,4) | herdar

Espessura da moldura pode ser especificado em pixels ou outras unidades disponíveis em CSS. As variáveis ​​finas, médias e grossas definem a espessura da borda em 2, 4 e 6 pixels, respectivamente:

largura da borda:médio;

Tal como acontece com as propriedades padding e margin, o parâmetro border-width permite um, dois, três ou quatro valores, definindo assim a largura da borda para todos os lados de uma vez ou para cada lado separadamente:

largura da borda: 5px 3px 5px 3px

Para o parágrafo atual, faça a espessura da borda superior 1px, direita 2px, inferior 3px e esquerda 4px usando a regra (border-width: 1px 2px 3px 4px;)

Usando os atributos de estilo border-left-width, border-top-width, border-right-width e border-bottom-width, você pode definir a espessura dos lados esquerdo, superior, direito e inferior da borda, respectivamente:

largura da borda esquerda | largura da borda superior | largura da borda direita | largura da borda inferior: fino | médio | grosso |<толщина>|herdar

O próximo parâmetro é border-color com o qual você pode controlar cor da moldura:

cor da borda: [cor | transparente] (1,4) | herdar

A propriedade permite definir a cor da borda para todos os lados do elemento de uma só vez ou apenas para os especificados. Como valor, você pode usar os métodos de especificação de cores aceitos em HTML: código hexadecimal, palavras-chave, etc.:

p (largura da borda: 2px; cor da borda: vermelho)

transparente define a cor da borda transparente e herda o valor do pai. Por padrão, se a cor da borda não for especificada, será usada aquela usada para a fonte dentro do elemento fornecido.

Usando os atributos de estilo border-left-color, border-top-color, border-right-color e border-bottom-color, você pode definir a cor dos lados esquerdo, superior, direito e inferior da borda, respectivamente:

cor da borda esquerda | cor da borda superior | cor da borda direita | cor da borda inferior: transparente |<цвет>|herdar

E último parâmetro estilo de borda especifica tipo de quadro:

estilo de borda: (1,4) | herdar

O tipo de moldura pode ser especificado para todos os lados de um elemento de uma só vez ou apenas para aqueles especificados. Você pode usar várias palavras-chave como valores. A aparência dependerá do navegador utilizado e da espessura da moldura. Significado nenhumé usado por padrão e não exibe um quadro e sua espessura é definida como zero. O valor oculto tem o mesmo efeito. A moldura resultante para outros valores, dependendo da espessura, é mostrada na tabela abaixo:

Os atributos de estilo border-left-style, border-top-style, border-right-style e border-bottom-style especificam o estilo das linhas que serão desenhadas nos lados esquerdo, superior, direito e inferior do quadro, respectivamente:

estilo de borda esquerda | estilo de borda superior | estilo de borda direita | estilo de borda inferior: nenhum | oculto | pontilhado | tracejado | sólido | duplo | ranhura | cume | inserção | início | herdar

Tal como acontece com as opções de preenchimento e preenchimento, existem propriedade de fronteira genérica. Permite definir simultaneamente a espessura, o estilo e a cor da borda ao redor de um elemento:

fronteira: | herdar

Os valores podem estar em qualquer ordem, separados por espaços:

td (borda: 1px amarelo sólido)

Para definir uma borda apenas em determinados lados de um elemento, existem as propriedades border-top, border-bottom, border-left, border-right, que permitem definir parâmetros para a parte superior, inferior, esquerda e lado direito estrutura

Resta apenas resumir:

• para a tarefa preenchimento usamos a propriedade preenchimento;
• configurar margens existe uma regra margem;
• parâmetros de quadro são especificados usando o atributo fronteira.

Noto que todos estes propriedades css aumentar o tamanho de um elemento de página da web. Portanto, se alterarmos a espessura da borda ou o tamanho do preenchimento dos contêineres de blocos que formam o design da página web, teremos que alterar os tamanhos desses contêineres de acordo, caso contrário eles poderão se mover e o design será quebrado.

Isso é tudo, até a próxima!

Hoje falaremos um pouco sobre os princípios do layout, ou seja, sobre as formas de organizar o recuo do seu site para determinados elementos.

O elemento em questão que precisa ser recuado pode ser um texto, uma imagem, uma tabela ou qualquer outro elemento HTML. O principal é seguir algumas regras importantes, das quais falarei agora.

Se você está apenas criando seu site, recomendo que insira as seguintes propriedades no topo do seu arquivo de estilo principal:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; ) *:antes, *:depois ( -webkit-box-sizing: border- caixa; -moz-box-sizing: border-box;

Por que isso é necessário, você pergunta? Respondo sua pergunta com um exemplo claro.

Digamos que você tenha um elemento de layout como este:

Esta é a aparência da opção sem usar as propriedades descritas acima (elemento superior) e com seu uso (elemento inferior):

O que você pode ver aqui? Que a largura do elemento na primeira versão (sem usar propriedades) ficou maior do que o especificado devido aos recuos adicionados, o que não é totalmente conveniente e correto em termos de layout.

A opção com propriedades é muito mais agradável esteticamente, mas você deve usá-la com consciência, pois ao adicioná-las a um site pronto, você corre o risco de ficar com um design ruim e uma “dor de cabeça” na forma de colocar tudo na forma adequada . Todos os projetos que tive a oportunidade de liderar de raiz não ficaram isentos destas propriedades.

E agora, na verdade, vamos falar sobre opções para organizar recuos de elementos em seu site com exemplos visuais.

Preenchimento usando a propriedade CSS “padding”

Para que você entenda toda a lógica das coisas, tomemos como exemplo o seguinte fragmento do layout:

com seus próprios estilos:

Test_div (largura: 250px; borda: 1px sólido;)

A versão visual fica assim:

Qual é a propriedade " preenchimento"? Ajuda a organizar o recuo interno nos elementos especificados. Vamos adicionar um preenchimento interno de 10px ao nosso layout:

Test_div (largura: 250px; borda: 1px sólida; preenchimento: 10px; // preenchimento 10px)

Visualmente fica assim:

O número 10 na propriedade significa que dentro dos elementos especificados, em cada um de seus quatro lados, é necessário adicionar uma margem de 10px. Pixels (px) podem ser substituídos por porcentagens ou outros valores suportados por CSS.

Existem duas opções indicações dos lados a partir dos quais os recortes devem ser feitos.

Primeiro- isto é com indicação explícita das partes:

Preenchimento superior: 10px; // preenchimento superior de 10px à direita: 10px; // preenchimento de 10px na parte inferior direita: 10px; // Preenchimento interno 10px da parte inferior padding-left: 10px; // preenchimento esquerdo de 10px

Nesse caso, cada lado usa sua propriedade. E segundo:

Preenchimento: 10px 0 0 0; // Preenchimento interno 10px na parte superior, todo o resto - 0px padding: 10px 0; // Preenchimento interno 10px na parte superior e inferior, e nas laterais - preenchimento 0px: 0 10px; // Preenchimento interno 0px superior e inferior e 10px nas laterais

Aqui está uma lista simples de valores, cada um correspondendo ao seu lado. Os lados são definidos assim: o primeiro valor é superior, o segundo é direito, o terceiro é inferior e o quarto é esquerdo, ou seja, tudo está no sentido horário.

Se houver dois valores (superior e direito), isso significa que no espelho os mesmos valores vão para baixo e para a esquerda, e esse é o único caminho. Tudo parece estar claro. Se você não precisar definir um recuo para um dos lados, defina o valor deste lado como “0”. Gosto mais dessa opção, pois é mais compacta, mas em meus empreendimentos usei a primeira opção.

Este tipo de recuo é bom para separar texto, conteúdo de células de tabela, etc. informações de texto. Para separar os próprios elementos, semelhantes aos do exemplo acima, existe outra propriedade.

Margem usando a propriedade CSS “margin”

Característica distintiva da propriedade " margem" significa que o recuo é adicionado fora do elemento, ou seja, externo.

Existem também duas opções para adicionar aqui.

Primeiro– com indicação explícita da parte:

Margem superior: 10px; // Margem de 10px na margem superior direita: 10px; // Margem de 10px na margem inferior direita: 10px; // Margem externa 10px da margem inferior esquerda: 10px; // Margem esquerda de 10px

Segundo– com uma lista de valores, cada um correspondendo ao seu lado:

Margem: 10px 0 0 0; // Margem externa 10px no topo, todo o resto - 0px margin: 10px 0; // Margem 10px na parte superior e inferior, e nas laterais - 0px margin: 0 10px; // Preenchimento externo de 0px na parte superior e inferior e 10px nas laterais

Não vou descrever aqui todas as nuances de trabalhar com as regras, tudo é igual ao da propriedade “ preenchimento", escrito sobre ele acima.

Usamos margem com o seguinte valor:

Test_div (largura: 250px; borda: 1px sólida; margem: 10px; // Margem 10px)

Visualmente ficará assim:

Como pode ser visto no exemplo, neste caso, uma margem externa é adicionada para separar os elementos especificados.

Recurso importante: se você observar atentamente o resultado, poderá ter notado que os recuos adjacentes dos elementos não se somam. Ou seja, se o primeiro elemento tiver margem inferior de 10px, e o segundo elemento tiver margem superior de mesmo valor, então a distância total entre eles também será de 10px. Se forem 10 e 15 respectivamente, o total será 15 e assim por diante.

Esta opção de recuo é frequentemente utilizada em texto, nomeadamente no desenho de parágrafos, bem como em elementos que possuem bordas visíveis.

Mas ambas as propriedades não se limitam apenas a estes elementos. Você mesmo escolhe as opções para usá-los, apenas tentei fornecer o básico sobre eles.

O layout CSS sempre foi retangular. Quaisquer linhas suaves são de competência do desenvolvedor. As regras de estilo fornecem opções suficientes para dar à página um formato suave dentro dos limites da resolução da tela. Mas qualquer elemento de layout é sempre um retângulo no qual a disposição das informações é regida por regras CSS.

O preenchimento de todos os lados é importante para cada elemento da página quando está absolutamente posicionado, e o preenchimento superior do CSS é definido especificamente porque é importante para diferentes elementos, especialmente os embutidos.

Regras básicas de posicionamento

Um elemento de bloco possui uma regra para recuo dos lados do elemento que contém (margem), uma regra para recuo para elementos dentro dele (preenchimento) e uma largura de borda (borda), que também pode ser usada.

O recuo no topo é de particular importância. CSS dentro de um bloco associa regras de preenchimento com regras para elementos posicionados de forma absoluta e relativa dentro desse bloco.

Uma prática comum para regras CSS: você pode especificar o mesmo preenchimento em todos os lados, em pares superior/inferior e direita/esquerda, ou para cada lado separadamente. Por exemplo,

• margem: 10px;
• preenchimento: 10px20px;
• preenchimento: 10px20px30px40px.

No primeiro caso, é definido o recuo do elemento nas laterais do recipiente externo no qual ele está localizado. No segundo caso, as margens superior e inferior são de 10px, à esquerda e à direita - 20px. No terceiro caso, o tamanho dos recuos é indicado em todos os lados: superior, direito, inferior e esquerdo.

Em todos esses casos, o recuo o CSS superior tem 10 px.

Regras que alteram a posição dos elementos

Se um elemento de layout não estiver posicionado de forma absoluta, ele será posicionado na ordem geral de formação da página.

Se definirmos preenchimento no topo do CSS no elemento scCurrInfo, o objetivo será alcançado, mas se estiver no nível li, não.

Neste exemplo, usando a regra de preenchimento: 40px; requer uma redução adequada das regras de largura e altura em 80px. EM de outra forma O tamanho do bloco scCurrInfo excederá os limites do bloco externo.

Se removermos a regra de preenchimento da descrição scCurrInfo, mas a adicionarmos com um valor de 20px à descrição do estilo do item da lista, obteremos apenas recuo superior. CSS não aplicará este valor a terceiros.

Naturalmente, este uso da regra de indentação se aplica a cada elemento li.

Práticas gerais de formatação de conteúdo

Alguns desenvolvedores alcançam a perfeição criando páginas usando elementos de bloco. Aparentemente, esta é uma prática clássica - começar com tabelas e terminar seu próprio processo educacional com blocos.

A liberdade inerente ao layout de blocos é fascinante, e a imaginação do desenvolvedor não pode ser limitada por regras rígidas de tabela: apenas linhas, apenas células, mesclando apenas horizontal e verticalmente. Nada peculiar às ideias relacionais.

Enquanto isso, as tabelas, além das desvantagens óbvias, apresentam muitas vantagens qualitativas. Ao criar o preenchimento na parte superior, o CSS leva em consideração o preenchimento à esquerda e à direita (a parte inferior é um momento especial). As regras das células da tabela permitem controlar o alinhamento vertical e horizontal. Usando estilos de linha e combinando-os com estilos de célula, você pode criar visualizações complexas de conteúdo.

A representação habitual de uma página em forma de retângulos não impede de forma alguma que ela seja apresentada em forma de tabela. Também são retângulos, mas também são células de tabela, ou seja, possuem regras próprias que complementam as regras dos blocos.

Posicionamento absoluto

Bloquear com a regra POSITION: absoluto; estará localizado em um local determinado por suas coordenadas relativas ao bloco em que está localizado.

Uma característica das regras CSS é que “a prática é o melhor critério de verdade” na maioria dos casos, especialmente quando a compatibilidade entre navegadores é necessária e o layout é feito manualmente, é preferível estudar manuais completos em folhas de estilo em cascata.

O uso de tabelas geralmente resulta em problemas de mudança de conteúdo das células. Um deslocamento semelhante dentro de um bloco nem sempre afeta todos os elementos. Experimentando, você pode alcançar o resultado desejado. Uma tarefa trivial: como remover o preenchimento superior nem sempre é uma solução trivial para CSS.

Em alguns casos, quando você precisa fazer o layout dos elementos da página nas entranhas de algum sistema popular de gerenciamento de conteúdo de site, ainda precisa prestar atenção não apenas à prática experimental, mas também à experiência de seus colegas.