CSS Margin, align, propriedades e classe

MugenShion · 27 de abril de 2019

Bom eu estou aprendendo sobre css e não estou entendendo bem como funciona o margin, tipo eu sei onde ele da espaço mas vou fazer uma situação hipotética:

eu crio um elemento de descrição de imagem com a tag figcaption e coloco a propriedade margin com valor 0 auto, eu sei que estou especificando que todos os lados vão ter 0 de espaçamento mas porque quando uso a mesma propriedade no body ele não aplica o efeito ? quer dizer margin seria especifico para descrição da minha imagem, mas se usa-se no body n seria para página inteira? estou aprendendo tudo certinho mas estou com problemas em entender bem sobre margin

outra propriedade (align) não entendi o valor justify e queria saber a diferença do valor left

sobre classe, eu sempre uso:

tag.nomedaclasse{}

mas como eu crio uma classe recebendo como herença essa classe ? eu queria colocar junto com a tag na herança também se possível é porque quero ser o + especifico possível no código.

Adriano_web · 27 de abril de 2019

@MugenShion quando você especifica margin: 0 auto; você está dizendo que quer 0 pixels de margem superior e inferior (margin-top: 0) e as margens esquerda e direita vão ser automáticas, isso quer dizer que criaram margens dependendo da largura do elemento <figcaption>. Exemplo:

figcaption {
  width: 440px;
  margin: 0 auto;
}

Esse exemplo mostra um elemento figcaption que recebe uma largura de 440 pixels, a margem esquerda e direita vai ser calculada dependendo da largura, a formula é 440 / (largura de tela do seu dispositivo) = valor das margens.

Se for no body

body {
 margin: 0 auto; 
}

Isso não terá efeito algum pois "auto" será 0px porque não tem largura definida..

Será um margin: 0;

Enquanto text-align: justify; ele ajusta parágrafos para que caibam num espaço completo de uma caixa.

Espero ter ajudado

GabrielSennaMs · 27 de abril de 2019

@MugenShion Vou fazer uma pequena correção da explicação do amigo @Adriano_web.

O valor 0 na declaração da

margin: 0 auto;

Não significa 0px, significa que você não quer declarar aquele ou aqueles valores de margin.

MugenShion · 27 de abril de 2019

ok deixa eu ver se entendi

<div style="margin: 0 auto; width="440px"">Caixa</div>

ali na div eu defini que minha div terá 440 pixels de largura, e que superior e inferior vão ter 0 de valor de margin ou seja n vai ter margin emcima e nem embaixo, e os lados vão ser automáticos e que a largura vai ser divida pelo tamanho da tela do pc então ele vai tirar 440 pixels e vai separar o resto para direita e para esquerda estou certo?

sobre o text-align: justify; eu não entendi ainda, tipo se eu usar tag <p> não cria uma parágrafo ? mesmo se for numa caixa ou boxe ?

GabrielSennaMs · 27 de abril de 2019

Bom isso aqui está errado

<div style="margin: 0 auto; width="440px"">Caixa</div>

O correto seria

<div style="margin: 0 auto; width:440px; ">Caixa</div>

Nesse caso você não declara a margem Horizontal, e declara que a margem vertical vai ser automática, isso é de acordo com o elemento pai, caso o elemento pai for o BODY ele vai se ajustar no centro da página, isso se você não fez nenhuma modificação no tamanho do BODY.

Quando você define que a propriedade vai ser justify cada texto é esticado para que cada texto tenha largura igual e as margens esquerda e direita sejam retas (como em revistas e jornais), você pode colocar um novo paragrafo com o elemento p o texto dentro de p vai se esticado ate ficar ajustado, isso não vai alterar o tamanho do texto.

Um exemplo para você ver a diferença de left para justify:

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: left;
}
.div2 {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<div class="div1">
In my younger and more vulnerable years my father gave me some advice that <p>I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>

<div class="div2">
In my younger and more vulnerable years my father gave me some advice that <p>I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>

</body>
</html>

MugenShion · 27 de abril de 2019

tem como explicar melhor o margin ? é que sou meio lento em entender, o 0 seria as margins verticais ? e se for 0 de margin então n significa que é o valor padrão da página ?

adicionado 5 minutos depois

sobre o justify é sempre que eu for criar um boxe ou uma caixa com texto certo? e left quando eu estiver criando um texto

GabrielSennaMs · 27 de abril de 2019

@MugenShion

As propriedades margin no CSS são usadas para criar espaço ao redor de elementos, fora de qualquer borda definida.

Com CSS, você tem controle total sobre as margens. Existem propriedades para definir a margem para cada lado de um elemento (superior(top), direita(right), inferior(bottom) e esquerda(left)).

Existe dois meios de você adicionar a propriedade margem.

O primeiro e o Margin - Individual Sides:

O CSS tem propriedades para especificar a margem para cada lado de um elemento:

margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;

O segundo e o Margin - Shorthand Property

margin: 5px 10px 15px 20px;

A propriedade margin é uma propriedade abreviada para as seguintes propriedades de margem individuais:

- margin-top

- margin-right

- margin-bottom

- margin-left

Você pode usar a propriedade margin de quatro formas

1 - inserido todas as propriedades da margem em uma propriedade margin, para isso você deve seguir uma ordem.

margin: 5px 10px 15px 20px;

A ordem é top, right, bottom e left.

2 - Você pode abreviar a propriedade margin em 3 valores, porém as propriedades right e left da margem terá um valor igual, para isso ocorrer você deve seguir uma ordem.

margin: 5px 30px 15px;

A ordem é top, (right e left) e bottom

3 - Você pode abreviar ainda mais a propriedade margin colocando apenas 2 valores, porém as propriedades right e left terá o valor igual, e top é bottom, para isso ocorrer você deve seguir uma ordem.

margin: 20px 30px;

A ordem é (top e bottom) e (right e left).

4- Você pode abreviar as propriedade margin colocando apenas 1 valor, porém todos as propriedades vão ter os valores iguais.

margin: 50px;

Caso você queira utilizar a abreviação margin e queira alterar uma propriedade de margin depois, você pode usando uma propriedade margin individual sides.

margin: 0 30px;
margin-top: 5px;

O valor 0 na propriedade vai servir mais com uma borracha, apagando o/s valor/es daquela/s propriedade/s.

Apesar de nos exemplos eu só utiliza valores em px, existe diferentes tipos de valores que podem ser utilizados.

Todas as propriedades de margem podem ter os seguintes valores:

1- auto - o navegador calcula a margem

2 - length - especifica uma margem em px, pt, cm, etc.

3 - % - especifica uma margem em % da largura do elemento contido

4 - inherit - especifica que a margem deve ser herdada do elemento pai

MugenShion · 27 de abril de 2019

ok, então 0 significa nenhuma margin certo? e auto é quando o navegador vai calcular as margins de acordo com a largura definida no seletor ?

adicionado 1 minuto depois

outra coisa, o padrão é sempre 0 ? no caso não há nenhuma margin no navegador até que definimos uma ?

GabrielSennaMs · 28 de abril de 2019

@MugenShion É Isso ai

Adriano_web · 29 de abril de 2019

Em 27/04/2019 às 18:25, GabrielSennaMs disse:
@MugenShion Vou fazer uma pequena correção da explicação do amigo @Adriano_web.

O valor 0 na declaração da
margin: 0 auto;
Não significa 0px, significa que você não quer declarar aquele ou aqueles valores de margin.

Correto, eu me equivoquei quanto a isso pois geralmente coloco margin: 0px; realmente o "0" do margin representa nada não especificando a unidade.