Como lembrar em CSS que a margem está fora da borda e o preenchimento está dentro
https://stackoverflow.com/questions/32668
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu não edito CSS com muita frequência e quase sempre preciso pesquisar no Google Modelo de caixa CSS para verificar se padding está dentro do border e margin fora ou vice-versa.(Basta verificar novamente e padding está dentro).
Alguém tem uma boa maneira de lembrar disso?Um pouco mnemônico, uma boa explicação de por que os nomes são assim...
Solução
Quando trabalhar com CSS finalmente deixa você louco, a célula preenchida em que eles irão colocá-lo tem o preenchimento no dentro das paredes.
Outras dicas
pino - P está dentro
Você está usando uma caixa.Se você estivesse colocando algo em uma caixa, colocaria um acolchoamento dentro para garantir que não batesse nas laterais.A margem seria então a outra coisa.
Imprima o diagrama do Dimensões da caixa seção da especificação e coloque-a na parede.
Para mim, "preenchimento" soa mais interno do que "margem".Talvez pensar na página impressa ajudasse?As margens são áreas externas - geralmente, você não consegue nem imprimir até a borda - elas não podem ser marcadas.Dentro dessas margens, o conteúdo poderia ser preenchido para fornecer uma barreira extra entre o conteúdo e a margem?
Depois de trabalhar o suficiente com CSS, será uma segunda natureza lembrar disso.
O preenchimento geralmente é usado no interior.Seja no interior de uma parede ou em uma caixa de entrega, é simples.E se o preenchimento estiver dentro, a margem estará fora.Não deve ser muito difícil.
Acabei de aprender com o tempo - o modelo da caixa é bastante simples, mas a principal razão pela qual as pessoas acham isso difícil é porque body não quebra visivelmente o modelo.
Realmente, se você der body uma margem e um fundo você deverá vê-lo cercado por uma faixa branca.No entanto, este não é o caso - bodyO preenchimento de é igual à margem.Isso estabelece algumas coisas incorretas sobre o modelo de caixa.
Geralmente penso assim:
- margem = espaçamento ao redor da caixa;
- borda = borda da caixa;
- padding = espaço dentro da caixa.
Tim Saunders deu alguns conselhos excelentes - quando comecei a usar CSS, fiz questão de construir uma folha de estilo base boa e totalmente comentada.Essa folha de estilo mudou muitas vezes e continua sendo um excelente recurso.
No entanto, quando me deparei com meus próprios problemas de modelo de caixa, comecei a usar o 'Mo Pi'.Como em: "Eu não sou gordo o suficiente, preciso comer Mo Pi". Estranho, mas funcionou para mim.Claro, ganhei dez quilos enquanto aprendia CSS...;-)
use o firebug para ajudá-lo a ver.
Crie você mesmo uma folha de estilo base comentada que poderá usar como modelo sempre que precisar criar um novo site ou editar um site existente.
Você pode adicioná-lo à medida que aumenta seu conhecimento e aplicá-lo a vários navegadores diferentes para ver como várias coisas se comportam.
Você também poderá adicionar comentários ou exemplos sobre outras coisas difíceis de lembrar ou que sejam contra-intuitivas.
Adicione borda, mesmo que temporariamente.Ao brincar com os números, você verá a diferença.
Na verdade, bordas temporárias ao redor dos elementos são uma maneira útil de trabalhar, para que você possa ver por que os carros alegóricos estão caindo, etc.
Sei que esta é uma resposta à sua pergunta, mas é mais uma dica.Sempre que estou lidando com margem e preenchimento, adicionarei uma borda ao redor da parte que você está trabalhando e, a partir daí, ela me mostrará o espaço com o qual tenho que trabalhar.Quando estiver tudo pronto, removo a borda.
PAdding é uma parte do PAinting de um elemento:estende o elemento fundo.Faz sentido pensar em um par elemento + preenchimento como compartilhando um plano de fundo comum.O preenchimento é análogo à tela da pintura:quanto maior o preenchimento, maior será a tela e, portanto, o fundo.A borda (moldura da pintura) contornaria esse par.E margem separará pinturas na parede da galeria.Pensar no conceito de fundo do objeto ajuda a unir o par objeto + preenchimento.As explicações habituais sobre o que está dentro e fora não ficam na memória:depois de um tempo todos voltam à confusão original.Lembre-se também de que as margens são recolhíveis verticalmente e o preenchimento não.
Em vez de perguntar repetidamente ao Google, basta usar a janela do inspetor.Nessa guia de estilo e role para baixo, você pode ver assim.
Margem:Quando você deseja mover o bloco.Preenchimento:Quando você quiser mover os itens dentro de um bloco.
